added hovercard embeds
This commit is contained in:
parent
150f16a3de
commit
1589c35026
@ -7,6 +7,24 @@ import { useEffect, useRef, useState } from "react";
|
|||||||
import { motion, AnimatePresence } from "framer-motion";
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
import { DepthMap } from "./DepthMap";
|
import { DepthMap } from "./DepthMap";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
|
||||||
|
|
||||||
|
// Helper function to extract YouTube video ID from URL
|
||||||
|
function extractYouTubeVideoId(url: string): string | null {
|
||||||
|
const patterns = [
|
||||||
|
/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\n?#]+)/,
|
||||||
|
/youtube\.com\/embed\/([^&\n?#]+)/
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const pattern of patterns) {
|
||||||
|
const match = url.match(pattern);
|
||||||
|
if (match) {
|
||||||
|
return match[1];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
export function TempPlaceholder() {
|
export function TempPlaceholder() {
|
||||||
const titleRef = useRef<HTMLHeadingElement | null>(null);
|
const titleRef = useRef<HTMLHeadingElement | null>(null);
|
||||||
@ -273,6 +291,8 @@ export function TempPlaceholder() {
|
|||||||
</li>
|
</li>
|
||||||
<li className="flex items-start">
|
<li className="flex items-start">
|
||||||
<span className="text-gray-400 mr-3 mt-1">•</span>
|
<span className="text-gray-400 mr-3 mt-1">•</span>
|
||||||
|
<HoverCard>
|
||||||
|
<HoverCardTrigger asChild>
|
||||||
<a
|
<a
|
||||||
href="https://www.youtube.com/watch?v=4QIZE708gJ4"
|
href="https://www.youtube.com/watch?v=4QIZE708gJ4"
|
||||||
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
||||||
@ -284,9 +304,25 @@ export function TempPlaceholder() {
|
|||||||
<span className="sm:hidden">(feat. Morgan Wallen)</span>
|
<span className="sm:hidden">(feat. Morgan Wallen)</span>
|
||||||
<span className="hidden sm:inline"> (feat. Morgan Wallen)</span>
|
<span className="hidden sm:inline"> (feat. Morgan Wallen)</span>
|
||||||
</a>
|
</a>
|
||||||
|
</HoverCardTrigger>
|
||||||
|
<HoverCardContent className="w-80 p-0 bg-black border-gray-800">
|
||||||
|
<iframe
|
||||||
|
width="320"
|
||||||
|
height="180"
|
||||||
|
src="https://www.youtube.com/embed/4QIZE708gJ4"
|
||||||
|
title="Post Malone - I Had Some Help (feat. Morgan Wallen)"
|
||||||
|
frameBorder="0"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowFullScreen
|
||||||
|
className="rounded-md"
|
||||||
|
/>
|
||||||
|
</HoverCardContent>
|
||||||
|
</HoverCard>
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-start">
|
<li className="flex items-start">
|
||||||
<span className="text-gray-400 mr-3 mt-1">•</span>
|
<span className="text-gray-400 mr-3 mt-1">•</span>
|
||||||
|
<HoverCard>
|
||||||
|
<HoverCardTrigger asChild>
|
||||||
<a
|
<a
|
||||||
href="https://www.youtube.com/watch?v=z2tUpLHdd4M"
|
href="https://www.youtube.com/watch?v=z2tUpLHdd4M"
|
||||||
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
||||||
@ -296,9 +332,25 @@ export function TempPlaceholder() {
|
|||||||
>
|
>
|
||||||
The Wait Is Over | OFFICIAL TRAILER
|
The Wait Is Over | OFFICIAL TRAILER
|
||||||
</a>
|
</a>
|
||||||
|
</HoverCardTrigger>
|
||||||
|
<HoverCardContent className="w-80 p-0 bg-black border-gray-800">
|
||||||
|
<iframe
|
||||||
|
width="320"
|
||||||
|
height="180"
|
||||||
|
src="https://www.youtube.com/embed/z2tUpLHdd4M"
|
||||||
|
title="The Wait Is Over | OFFICIAL TRAILER"
|
||||||
|
frameBorder="0"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowFullScreen
|
||||||
|
className="rounded-md"
|
||||||
|
/>
|
||||||
|
</HoverCardContent>
|
||||||
|
</HoverCard>
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-start">
|
<li className="flex items-start">
|
||||||
<span className="text-gray-400 mr-3 mt-1">•</span>
|
<span className="text-gray-400 mr-3 mt-1">•</span>
|
||||||
|
<HoverCard>
|
||||||
|
<HoverCardTrigger asChild>
|
||||||
<a
|
<a
|
||||||
href="https://www.youtube.com/watch?v=RCZ9wl1Up40"
|
href="https://www.youtube.com/watch?v=RCZ9wl1Up40"
|
||||||
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
||||||
@ -308,9 +360,25 @@ export function TempPlaceholder() {
|
|||||||
>
|
>
|
||||||
2hollis Star Album Trailer
|
2hollis Star Album Trailer
|
||||||
</a>
|
</a>
|
||||||
|
</HoverCardTrigger>
|
||||||
|
<HoverCardContent className="w-80 p-0 bg-black border-gray-800">
|
||||||
|
<iframe
|
||||||
|
width="320"
|
||||||
|
height="180"
|
||||||
|
src="https://www.youtube.com/embed/RCZ9wl1Up40"
|
||||||
|
title="2hollis Star Album Trailer"
|
||||||
|
frameBorder="0"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowFullScreen
|
||||||
|
className="rounded-md"
|
||||||
|
/>
|
||||||
|
</HoverCardContent>
|
||||||
|
</HoverCard>
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-start">
|
<li className="flex items-start">
|
||||||
<span className="text-gray-400 mr-3 mt-1">•</span>
|
<span className="text-gray-400 mr-3 mt-1">•</span>
|
||||||
|
<HoverCard>
|
||||||
|
<HoverCardTrigger asChild>
|
||||||
<a
|
<a
|
||||||
href="https://www.youtube.com/watch?v=yLxoVrFpLmQ"
|
href="https://www.youtube.com/watch?v=yLxoVrFpLmQ"
|
||||||
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
||||||
@ -320,9 +388,25 @@ export function TempPlaceholder() {
|
|||||||
>
|
>
|
||||||
Thanksgiving With Kai, Kevin & Druski
|
Thanksgiving With Kai, Kevin & Druski
|
||||||
</a>
|
</a>
|
||||||
|
</HoverCardTrigger>
|
||||||
|
<HoverCardContent className="w-80 p-0 bg-black border-gray-800">
|
||||||
|
<iframe
|
||||||
|
width="320"
|
||||||
|
height="180"
|
||||||
|
src="https://www.youtube.com/embed/yLxoVrFpLmQ"
|
||||||
|
title="Thanksgiving With Kai, Kevin & Druski"
|
||||||
|
frameBorder="0"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowFullScreen
|
||||||
|
className="rounded-md"
|
||||||
|
/>
|
||||||
|
</HoverCardContent>
|
||||||
|
</HoverCard>
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-start">
|
<li className="flex items-start">
|
||||||
<span className="text-gray-400 mr-3 mt-1">•</span>
|
<span className="text-gray-400 mr-3 mt-1">•</span>
|
||||||
|
<HoverCard>
|
||||||
|
<HoverCardTrigger asChild>
|
||||||
<a
|
<a
|
||||||
href="https://www.youtube.com/watch?v=a2Zqdo9RbNs"
|
href="https://www.youtube.com/watch?v=a2Zqdo9RbNs"
|
||||||
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
||||||
@ -334,6 +418,20 @@ export function TempPlaceholder() {
|
|||||||
<span className="sm:hidden">(With or Without You) Official MV</span>
|
<span className="sm:hidden">(With or Without You) Official MV</span>
|
||||||
<span className="hidden sm:inline"> (With or Without You) Official MV</span>
|
<span className="hidden sm:inline"> (With or Without You) Official MV</span>
|
||||||
</a>
|
</a>
|
||||||
|
</HoverCardTrigger>
|
||||||
|
<HoverCardContent className="w-80 p-0 bg-black border-gray-800">
|
||||||
|
<iframe
|
||||||
|
width="320"
|
||||||
|
height="180"
|
||||||
|
src="https://www.youtube.com/embed/a2Zqdo9RbNs"
|
||||||
|
title="ENHYPEN (엔하이픈) Bad Desire (With or Without You) Official MV"
|
||||||
|
frameBorder="0"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowFullScreen
|
||||||
|
className="rounded-md"
|
||||||
|
/>
|
||||||
|
</HoverCardContent>
|
||||||
|
</HoverCard>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user