first commit
This commit is contained in:
AyrisAI
@@ -0,0 +1,128 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { CodeSnippet } from '@/lib/data';
|
||||
import { Check, Copy, Download, FileCode, Terminal } from 'lucide-react';
|
||||
|
||||
interface CodeBlockProps {
|
||||
snippets: CodeSnippet[];
|
||||
}
|
||||
|
||||
export function CodeBlock({ snippets }: CodeBlockProps) {
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
if (!snippets || snippets.length === 0) return null;
|
||||
|
||||
const currentSnippet = snippets[activeTab] || snippets[0];
|
||||
|
||||
const handleCopy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(currentSnippet.code);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch (err) {
|
||||
console.error('Copy error:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadFile = () => {
|
||||
const element = document.createElement('a');
|
||||
const file = new Blob([currentSnippet.code], { type: 'text/plain;charset=utf-8' });
|
||||
element.href = URL.createObjectURL(file);
|
||||
element.download = currentSnippet.fileName.split('/').pop() || 'code.txt';
|
||||
document.body.appendChild(element);
|
||||
element.click();
|
||||
document.body.removeChild(element);
|
||||
};
|
||||
|
||||
const lines = currentSnippet.code.split('\n');
|
||||
|
||||
return (
|
||||
<div className="w-full rounded-2xl bg-slate-950 border border-slate-800 shadow-2xl overflow-hidden my-6">
|
||||
|
||||
{/* Tab Navigation Header */}
|
||||
<div className="flex flex-wrap items-center justify-between bg-slate-900/90 px-4 py-2.5 border-b border-slate-800 gap-3">
|
||||
|
||||
{/* File Tabs */}
|
||||
<div className="flex items-center gap-1.5 overflow-x-auto py-1 scrollbar-none">
|
||||
{snippets.map((snip, index) => (
|
||||
<button
|
||||
key={snip.fileName}
|
||||
onClick={() => setActiveTab(index)}
|
||||
className={`flex items-center gap-2 px-3.5 py-1.5 rounded-lg text-xs font-mono font-medium transition-all ${
|
||||
activeTab === index
|
||||
? 'bg-slate-800 text-white shadow-sm border border-slate-700/80'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/40'
|
||||
}`}
|
||||
>
|
||||
<FileCode className={`w-3.5 h-3.5 ${activeTab === index ? 'text-red-400' : 'text-slate-500'}`} />
|
||||
<span>{snip.fileName}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleDownloadFile}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-semibold transition-colors border border-slate-700/60"
|
||||
title="Download File"
|
||||
>
|
||||
<Download className="w-3.5 h-3.5 text-slate-400" />
|
||||
<span className="hidden sm:inline">Download</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all border ${
|
||||
copied
|
||||
? 'bg-emerald-950/80 text-emerald-300 border-emerald-800/80'
|
||||
: 'bg-red-600 hover:bg-red-500 text-white border-red-500 shadow-sm shadow-red-600/20'
|
||||
}`}
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span>Copied!</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="w-3.5 h-3.5" />
|
||||
<span>Copy Code</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Snippet Description bar */}
|
||||
{currentSnippet.description && (
|
||||
<div className="px-4 py-2 bg-slate-900/50 border-b border-slate-800/60 text-xs text-slate-400 font-sans flex items-center gap-2">
|
||||
<Terminal className="w-3.5 h-3.5 text-red-400 flex-shrink-0" />
|
||||
<span>{currentSnippet.description}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Code Display Area with Line Numbers */}
|
||||
<div className="p-4 overflow-x-auto font-mono text-xs leading-relaxed max-h-[480px] bg-slate-950">
|
||||
<table className="w-full border-collapse">
|
||||
<tbody>
|
||||
{lines.map((line, idx) => (
|
||||
<tr key={idx} className="hover:bg-slate-900/40 transition-colors group">
|
||||
<td className="w-10 select-none text-right pr-4 text-slate-600 group-hover:text-slate-500 font-mono text-[11px]">
|
||||
{idx + 1}
|
||||
</td>
|
||||
<td className="whitespace-pre text-slate-200 pl-2">
|
||||
{line}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { MessageSquare, Heart } from 'lucide-react';
|
||||
import { YoutubeIcon as Youtube } from '@/components/icons/YoutubeIcon';
|
||||
import { GithubIcon as Github, TwitterIcon as Twitter } from '@/components/icons/BrandIcons';
|
||||
|
||||
export function Footer({ locale }: { locale: string }) {
|
||||
const t = useTranslations('footer');
|
||||
|
||||
return (
|
||||
<footer className="w-full border-t border-slate-800 bg-slate-950 text-slate-400 py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
|
||||
|
||||
{/* Brand column */}
|
||||
<div className="space-y-4 md:col-span-1">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="w-9 h-9 rounded-xl bg-slate-900 border border-slate-800 flex items-center justify-center overflow-hidden">
|
||||
<img src="/logo.jpeg" alt="ayris.tech Logo" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<span className="font-bold text-white text-lg tracking-tight">ayris.tech YouTube</span>
|
||||
</div>
|
||||
<p className="text-xs leading-relaxed text-slate-400">
|
||||
Official resource portal featuring tabbed code snippets, lesson notes, starter zip downloads, and timestamps for my YouTube tutorials.
|
||||
</p>
|
||||
<div className="flex items-center gap-3 text-slate-400">
|
||||
<a href="https://youtube.com" target="_blank" rel="noopener noreferrer" className="hover:text-red-500 transition-colors p-2 bg-slate-900 rounded-lg border border-slate-800">
|
||||
<Youtube className="w-4 h-4" />
|
||||
</a>
|
||||
<a href="https://github.com/ayrisdev" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors p-2 bg-slate-900 rounded-lg border border-slate-800">
|
||||
<Github className="w-4 h-4" />
|
||||
</a>
|
||||
<a href="https://twitter.com" target="_blank" rel="noopener noreferrer" className="hover:text-sky-400 transition-colors p-2 bg-slate-900 rounded-lg border border-slate-800">
|
||||
<Twitter className="w-4 h-4" />
|
||||
</a>
|
||||
<a href="https://discord.com" target="_blank" rel="noopener noreferrer" className="hover:text-indigo-400 transition-colors p-2 bg-slate-900 rounded-lg border border-slate-800">
|
||||
<MessageSquare className="w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Categories */}
|
||||
<div>
|
||||
<h4 className="font-semibold text-white text-sm mb-4">Popular Topics</h4>
|
||||
<ul className="space-y-2 text-xs">
|
||||
<li><Link href={`/${locale}/lessons?category=Next.js`} className="hover:text-red-400 transition-colors">Next.js 16 App Router</Link></li>
|
||||
<li><Link href={`/${locale}/lessons?category=Python%20%26%20AI`} className="hover:text-red-400 transition-colors">Python AI Agents</Link></li>
|
||||
<li><Link href={`/${locale}/lessons?category=Tailwind%20CSS`} className="hover:text-red-400 transition-colors">Tailwind CSS v4 Tips</Link></li>
|
||||
<li><Link href={`/${locale}/lessons?category=Docker%20%26%20DevOps`} className="hover:text-red-400 transition-colors">Docker & Coolify Deploy</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h4 className="font-semibold text-white text-sm mb-4">Quick Links</h4>
|
||||
<ul className="space-y-2 text-xs">
|
||||
<li><Link href={`/${locale}/lessons`} className="hover:text-red-400 transition-colors">All YouTube Lessons</Link></li>
|
||||
<li><Link href={`/${locale}/cheatsheets`} className="hover:text-red-400 transition-colors">Quick Cheatsheets</Link></li>
|
||||
<li><Link href={`/${locale}/contact`} className="hover:text-red-400 transition-colors">Contact & Suggestions</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Info & Banner */}
|
||||
<div className="bg-slate-900/60 p-5 rounded-2xl border border-slate-800 flex flex-col justify-between">
|
||||
<div>
|
||||
<span className="text-xs font-bold text-red-400 block mb-1">ayris.tech YouTube Channel</span>
|
||||
<p className="text-[11px] text-slate-300 leading-normal">
|
||||
Official resource portal for all video code snippets, starter packages, and lesson notes.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-4 pt-3 border-t border-slate-800 flex items-center justify-between text-[11px]">
|
||||
<span className="text-slate-400">Educational Portal</span>
|
||||
<span className="text-emerald-400 font-semibold flex items-center gap-1">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> Live
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar with mandatory link */}
|
||||
<div className="max-w-7xl mx-auto pt-8 border-t border-slate-900 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs">
|
||||
<p className="text-slate-400">
|
||||
© {new Date().getFullYear()} ayris.tech YouTube Channel. {t('rights')}
|
||||
</p>
|
||||
|
||||
{/* MANDATORY Created by ayris.tech LINK */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-slate-400 flex items-center gap-1">
|
||||
Built with <Heart className="w-3.5 h-3.5 text-red-500 fill-red-500" />
|
||||
</span>
|
||||
<a
|
||||
href="https://ayris.tech"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-3 py-1 bg-red-950/60 hover:bg-red-900/80 text-red-400 hover:text-red-300 border border-red-800/40 rounded-full font-bold transition-all shadow-sm shadow-red-900/30"
|
||||
>
|
||||
Created by ayris.tech
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Code2, BookOpen, Mail, Sparkles } from 'lucide-react';
|
||||
|
||||
export function Navbar({ locale }: { locale: string }) {
|
||||
const t = useTranslations('nav');
|
||||
const pathname = usePathname();
|
||||
|
||||
const navItems = [
|
||||
{ href: `/${locale}`, label: t('home'), icon: Sparkles },
|
||||
{ href: `/${locale}/lessons`, label: t('lessons'), icon: Code2 },
|
||||
{ href: `/${locale}/cheatsheets`, label: t('cheatsheets'), icon: BookOpen },
|
||||
{ href: `/${locale}/contact`, label: t('contact'), icon: Mail },
|
||||
];
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full border-b border-slate-800 bg-slate-950/80 backdrop-blur-xl transition-all">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||
|
||||
{/* Logo & Brand */}
|
||||
<Link href={`/${locale}`} className="flex items-center gap-3 group">
|
||||
<div className="w-10 h-10 rounded-xl bg-slate-900 border border-slate-800 flex items-center justify-center shadow-lg shadow-red-500/20 group-hover:scale-105 transition-transform overflow-hidden">
|
||||
<img src="/logo.jpeg" alt="ayris.tech Logo" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-extrabold text-lg text-white tracking-tight flex items-center gap-1.5">
|
||||
ayris.tech <span className="text-xs px-2 py-0.5 rounded-full bg-red-500/10 text-red-400 border border-red-500/20">YouTube</span>
|
||||
</span>
|
||||
<span className="text-[11px] text-slate-400 font-medium">Educational Code & Resource Hub</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Center Nav Links */}
|
||||
<nav className="hidden md:flex items-center gap-1 bg-slate-900/60 p-1.5 rounded-full border border-slate-800">
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = pathname === item.href || (item.href !== `/${locale}` && pathname.startsWith(item.href));
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-full text-xs font-semibold transition-all ${
|
||||
isActive
|
||||
? 'bg-red-600 text-white shadow-md shadow-red-600/20'
|
||||
: 'text-slate-300 hover:text-white hover:bg-slate-800/60'
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-3.5 h-3.5" />
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Right Action: YouTube Subscribe */}
|
||||
<div className="flex items-center gap-3">
|
||||
<a
|
||||
href="https://youtube.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-red-600 to-red-700 hover:from-red-500 hover:to-red-600 text-white text-xs font-bold rounded-full shadow-lg shadow-red-600/20 hover:shadow-red-600/30 transition-all hover:scale-105"
|
||||
>
|
||||
<img src="/logo.jpeg" alt="Logo" className="w-4 h-4 rounded-full object-cover" />
|
||||
<span>{t('subscribe')}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { VideoLesson } from '@/lib/data';
|
||||
import { Download, Eye, FileCode2, Clock, ArrowRight, Sparkles } from 'lucide-react';
|
||||
import { YoutubeIcon as Youtube } from '@/components/icons/YoutubeIcon';
|
||||
|
||||
interface ResourceCardProps {
|
||||
lesson: VideoLesson;
|
||||
locale: string;
|
||||
}
|
||||
|
||||
export function ResourceCard({ lesson, locale }: ResourceCardProps) {
|
||||
return (
|
||||
<div className="group relative bg-slate-900/60 hover:bg-slate-900 border border-slate-800 hover:border-slate-700/80 rounded-2xl overflow-hidden transition-all duration-300 flex flex-col justify-between shadow-xl hover:shadow-2xl hover:shadow-red-500/5 hover:-translate-y-1">
|
||||
|
||||
<div>
|
||||
{/* Thumbnail Container */}
|
||||
<div className="relative aspect-video w-full overflow-hidden bg-slate-950">
|
||||
<img
|
||||
src={lesson.thumbnailUrl}
|
||||
alt={lesson.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent opacity-80" />
|
||||
|
||||
{/* Featured Badge */}
|
||||
{lesson.isFeatured && (
|
||||
<div className="absolute top-3 left-3 flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-red-600/90 text-white text-[11px] font-bold shadow-lg backdrop-blur-md">
|
||||
<Sparkles className="w-3 h-3" />
|
||||
<span>FEATURED TUTORIAL</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Category Tag */}
|
||||
<div className="absolute top-3 right-3 px-2.5 py-1 rounded-full bg-slate-900/90 border border-slate-700/80 text-slate-200 text-[11px] font-semibold backdrop-blur-md">
|
||||
{lesson.category}
|
||||
</div>
|
||||
|
||||
{/* Duration Badge */}
|
||||
<div className="absolute bottom-3 right-3 flex items-center gap-1 px-2 py-0.5 rounded bg-slate-950/90 text-slate-300 text-[11px] font-mono border border-slate-800">
|
||||
<Clock className="w-3 h-3 text-red-400" />
|
||||
<span>{lesson.duration}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Body */}
|
||||
<div className="p-5 space-y-3">
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{lesson.tags.slice(0, 3).map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="text-[10px] font-medium px-2 py-0.5 rounded bg-slate-800/60 text-slate-400 border border-slate-800"
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="font-bold text-base text-white group-hover:text-red-400 transition-colors line-clamp-2 leading-snug">
|
||||
<Link href={`/${locale}/lessons/${lesson.slug}`}>
|
||||
{lesson.title}
|
||||
</Link>
|
||||
</h3>
|
||||
|
||||
{/* Summary */}
|
||||
<p className="text-xs text-slate-400 line-clamp-2 leading-relaxed">
|
||||
{lesson.summary}
|
||||
</p>
|
||||
|
||||
{/* Stats Bar */}
|
||||
<div className="pt-2 flex items-center justify-between text-[11px] text-slate-400 border-t border-slate-800/60">
|
||||
<span className="flex items-center gap-1">
|
||||
<FileCode2 className="w-3.5 h-3.5 text-red-400" />
|
||||
<span>{lesson.codeSnippets.length} Code Files</span>
|
||||
</span>
|
||||
|
||||
<span className="flex items-center gap-1">
|
||||
<Download className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span>{lesson.downloadCount.toLocaleString()} Downloads</span>
|
||||
</span>
|
||||
|
||||
<span className="flex items-center gap-1">
|
||||
<Eye className="w-3.5 h-3.5 text-sky-400" />
|
||||
<span>{lesson.viewsCount.toLocaleString()} Views</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Action Footer */}
|
||||
<div className="px-5 pb-5 pt-1">
|
||||
<Link
|
||||
href={`/${locale}/lessons/${lesson.slug}`}
|
||||
className="w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl bg-slate-800 hover:bg-red-600 text-slate-200 hover:text-white text-xs font-bold transition-all group-hover:shadow-lg group-hover:shadow-red-600/20"
|
||||
>
|
||||
<span>View Code & Notes</span>
|
||||
<ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Play, Clock, ExternalLink } from 'lucide-react';
|
||||
import { YoutubeIcon as Youtube } from '@/components/icons/YoutubeIcon';
|
||||
import { VideoChapter } from '@/lib/data';
|
||||
|
||||
interface VideoPlayerProps {
|
||||
youtubeId: string;
|
||||
youtubeUrl: string;
|
||||
title: string;
|
||||
chapters?: VideoChapter[];
|
||||
}
|
||||
|
||||
export function VideoPlayer({ youtubeId, youtubeUrl, title, chapters }: VideoPlayerProps) {
|
||||
const [activeSeconds, setActiveSeconds] = useState(0);
|
||||
|
||||
const embedUrl = `https://www.youtube.com/embed/${youtubeId}?autoplay=0&start=${activeSeconds}`;
|
||||
|
||||
const handleChapterClick = (seconds: number) => {
|
||||
setActiveSeconds(seconds);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-4">
|
||||
{/* Video Container */}
|
||||
<div className="relative w-full aspect-video rounded-2xl overflow-hidden bg-slate-900 border border-slate-800 shadow-2xl group">
|
||||
<iframe
|
||||
src={embedUrl}
|
||||
title={title}
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
className="w-full h-full border-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Chapters / Timestamps Quick Jumps */}
|
||||
{chapters && chapters.length > 0 && (
|
||||
<div className="bg-slate-900/80 p-4 rounded-xl border border-slate-800 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-bold text-slate-300 uppercase tracking-wider flex items-center gap-1.5">
|
||||
<Clock className="w-3.5 h-3.5 text-red-400" />
|
||||
Timestamped Chapters
|
||||
</span>
|
||||
<a
|
||||
href={youtubeUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-red-400 hover:text-red-300 flex items-center gap-1 font-medium transition-colors"
|
||||
>
|
||||
<span>Watch on YouTube</span>
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{chapters.map((chap) => (
|
||||
<button
|
||||
key={chap.time}
|
||||
onClick={() => handleChapterClick(chap.seconds)}
|
||||
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
||||
activeSeconds === chap.seconds
|
||||
? 'bg-red-600 text-white shadow-md shadow-red-600/30 ring-1 ring-red-400'
|
||||
: 'bg-slate-800/80 text-slate-300 hover:bg-slate-800 hover:text-white border border-slate-700/60'
|
||||
}`}
|
||||
>
|
||||
<span className="font-mono text-[11px] text-red-400 font-bold bg-slate-950/60 px-1.5 py-0.5 rounded">
|
||||
{chap.time}
|
||||
</span>
|
||||
<span>{chap.title}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
|
||||
export function GithubIcon({ className = "w-5 h-5", ...props }: React.SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" className={className} {...props}>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function TwitterIcon({ className = "w-5 h-5", ...props }: React.SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" className={className} {...props}>
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
export function YoutubeIcon({ className = "w-5 h-5", ...props }: React.SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
className={className}
|
||||
{...props}
|
||||
>
|
||||
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { Button as ButtonPrimitive } from "@base-ui/react/button"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
outline:
|
||||
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
icon: "size-8",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm":
|
||||
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||
"icon-lg": "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
...props
|
||||
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
|
||||
return (
|
||||
<ButtonPrimitive
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
@@ -0,0 +1,103 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn(
|
||||
"font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-(--card-spacing)", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn(
|
||||
"flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import * as React from "react"
|
||||
import { Input as InputPrimitive } from "@base-ui/react/input"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<InputPrimitive
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
Reference in New Issue
Block a user