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 { DepthMap } from "./DepthMap";
|
||||
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() {
|
||||
const titleRef = useRef<HTMLHeadingElement | null>(null);
|
||||
@ -273,67 +291,147 @@ export function TempPlaceholder() {
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-gray-400 mr-3 mt-1">•</span>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=4QIZE708gJ4"
|
||||
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
||||
style={{ color: '#ff4d00' }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Post Malone - I Had Some Help<br className="sm:hidden" />
|
||||
<span className="sm:hidden">(feat. Morgan Wallen)</span>
|
||||
<span className="hidden sm:inline"> (feat. Morgan Wallen)</span>
|
||||
</a>
|
||||
<HoverCard>
|
||||
<HoverCardTrigger asChild>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=4QIZE708gJ4"
|
||||
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
||||
style={{ color: '#ff4d00' }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Post Malone - I Had Some Help<br className="sm:hidden" />
|
||||
<span className="sm:hidden">(feat. Morgan Wallen)</span>
|
||||
<span className="hidden sm:inline"> (feat. Morgan Wallen)</span>
|
||||
</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 className="flex items-start">
|
||||
<span className="text-gray-400 mr-3 mt-1">•</span>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=z2tUpLHdd4M"
|
||||
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
||||
style={{ color: '#ff4d00' }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
The Wait Is Over | OFFICIAL TRAILER
|
||||
</a>
|
||||
<HoverCard>
|
||||
<HoverCardTrigger asChild>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=z2tUpLHdd4M"
|
||||
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
||||
style={{ color: '#ff4d00' }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
The Wait Is Over | OFFICIAL TRAILER
|
||||
</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 className="flex items-start">
|
||||
<span className="text-gray-400 mr-3 mt-1">•</span>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=RCZ9wl1Up40"
|
||||
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
||||
style={{ color: '#ff4d00' }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
2hollis Star Album Trailer
|
||||
</a>
|
||||
<HoverCard>
|
||||
<HoverCardTrigger asChild>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=RCZ9wl1Up40"
|
||||
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
||||
style={{ color: '#ff4d00' }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
2hollis Star Album Trailer
|
||||
</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 className="flex items-start">
|
||||
<span className="text-gray-400 mr-3 mt-1">•</span>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=yLxoVrFpLmQ"
|
||||
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
||||
style={{ color: '#ff4d00' }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Thanksgiving With Kai, Kevin & Druski
|
||||
</a>
|
||||
<HoverCard>
|
||||
<HoverCardTrigger asChild>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=yLxoVrFpLmQ"
|
||||
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
||||
style={{ color: '#ff4d00' }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Thanksgiving With Kai, Kevin & Druski
|
||||
</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 className="flex items-start">
|
||||
<span className="text-gray-400 mr-3 mt-1">•</span>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=a2Zqdo9RbNs"
|
||||
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
||||
style={{ color: '#ff4d00' }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
ENHYPEN (엔하이픈) Bad Desire<br className="sm:hidden" />
|
||||
<span className="sm:hidden">(With or Without You) Official MV</span>
|
||||
<span className="hidden sm:inline"> (With or Without You) Official MV</span>
|
||||
</a>
|
||||
<HoverCard>
|
||||
<HoverCardTrigger asChild>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=a2Zqdo9RbNs"
|
||||
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
||||
style={{ color: '#ff4d00' }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
ENHYPEN (엔하이픈) Bad Desire<br className="sm:hidden" />
|
||||
<span className="sm:hidden">(With or Without You) Official MV</span>
|
||||
<span className="hidden sm:inline"> (With or Without You) Official MV</span>
|
||||
</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>
|
||||
</ul>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user