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