Add src/app/dashboard/page.tsx
This commit is contained in:
263
src/app/dashboard/page.tsx
Normal file
263
src/app/dashboard/page.tsx
Normal file
@@ -0,0 +1,263 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { Video, Upload, Edit3, Trash2, Eye, Settings } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
interface DashboardVideo {
|
||||
id: string;
|
||||
title: string;
|
||||
thumbnail: string;
|
||||
duration: string;
|
||||
uploadDate: string;
|
||||
views: string;
|
||||
status: 'published' | 'draft' | 'processing';
|
||||
}
|
||||
|
||||
export default function Dashboard() {
|
||||
const [videos, setVideos] = useState<DashboardVideo[]>([
|
||||
{
|
||||
id: '1',
|
||||
title: 'Michelin-Star Pasta Carbonara Masterclass',
|
||||
thumbnail: 'http://img.b2bpic.net/free-photo/woman-applying-moisturizer-her-beauty-routine_23-2150166464.jpg',
|
||||
duration: '12:45',
|
||||
uploadDate: 'Jan 15, 2025',
|
||||
views: '2.4K',
|
||||
status: 'published'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'Advanced Plating Techniques for Fine Dining',
|
||||
thumbnail: 'http://img.b2bpic.net/free-photo/model-career-kit-still-life-flat-lay_23-2150218023.jpg',
|
||||
duration: '18:30',
|
||||
uploadDate: 'Jan 12, 2025',
|
||||
views: '1.8K',
|
||||
status: 'published'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Sustainable Sourcing for Restaurant Kitchens',
|
||||
thumbnail: 'http://img.b2bpic.net/free-photo/people-working-elegant-cozy-office-space_23-2149548692.jpg',
|
||||
duration: '15:20',
|
||||
uploadDate: 'Jan 10, 2025',
|
||||
views: '892',
|
||||
status: 'draft'
|
||||
}
|
||||
]);
|
||||
|
||||
const handleEdit = (id: string) => {
|
||||
console.log('Edit video:', id);
|
||||
};
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
setVideos(videos.filter(v => v.id !== id));
|
||||
};
|
||||
|
||||
const handleUpload = () => {
|
||||
console.log('Upload new video');
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "My Videos", id: "/dashboard" },
|
||||
{ name: "Analytics", id: "#" },
|
||||
{ name: "Settings", id: "#" },
|
||||
{ name: "Support", id: "#" }
|
||||
]}
|
||||
button={{ text: "Upload Video", href: "#" }}
|
||||
brandName="Chef Studio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
logoText="Chef Studio"
|
||||
description="Manage your culinary videos with professional tools. Upload, edit, and share your cooking expertise with the world."
|
||||
buttons={[
|
||||
{ text: "Upload New Video", onClick: handleUpload },
|
||||
{ text: "View Analytics", href: "#" }
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/model-career-kit-still-life-flat-lay_23-2150218023.jpg"
|
||||
imageAlt="Chef Studio Dashboard"
|
||||
mediaAnimation="slide-up"
|
||||
frameStyle="card"
|
||||
buttonAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
title="Powerful Video Management Tools"
|
||||
description="Everything you need to create, manage, and grow your culinary content library."
|
||||
features={[
|
||||
{
|
||||
title: "Upload & Organize", description: "Upload videos in multiple formats with automatic processing and organization", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Upload, label: "Formats", value: "4K Ready" },
|
||||
{ icon: Video, label: "Duration", value: "Unlimited" },
|
||||
{ icon: Settings, label: "Quality", value: "Auto-Optimize" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Edit & Customize", description: "Built-in editing tools to trim, add captions, and personalize your videos", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Edit3, label: "Trim", value: "Frame-Precise" },
|
||||
{ icon: Video, label: "Effects", value: "50+ Built-in" },
|
||||
{ icon: Eye, label: "Preview", value: "Real-Time" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Track Analytics", description: "Monitor views, engagement, and audience growth with detailed metrics", bentoComponent: "animated-bar-chart"
|
||||
},
|
||||
{
|
||||
title: "Publish & Share", description: "Share your videos across multiple platforms with one click", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Video, label: "Platforms", value: "10+" },
|
||||
{ icon: Settings, label: "Scheduling", value: "Auto-Post" },
|
||||
{ icon: Eye, label: "Analytics", value: "Real-Time" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="videos" data-section="videos" className="py-20">
|
||||
<div className="container mx-auto px-4 max-w-6xl">
|
||||
<div className="mb-12">
|
||||
<h2 className="text-4xl font-bold mb-4">Your Video Library</h2>
|
||||
<p className="text-lg text-gray-600">Manage and monitor your uploaded culinary content</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6">
|
||||
{videos.map((video) => (
|
||||
<div
|
||||
key={video.id}
|
||||
className="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row">
|
||||
{/* Thumbnail */}
|
||||
<div className="md:w-48 flex-shrink-0 relative group">
|
||||
<img
|
||||
src={video.thumbnail}
|
||||
alt={video.title}
|
||||
className="w-full h-48 object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all flex items-center justify-center">
|
||||
<Video className="w-12 h-12 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
<div className="absolute bottom-2 right-2 bg-black bg-opacity-75 text-white text-sm px-2 py-1 rounded">
|
||||
{video.duration}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 p-6 flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<h3 className="text-xl font-bold">{video.title}</h3>
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-semibold ${
|
||||
video.status === 'published'
|
||||
? 'bg-green-100 text-green-800'
|
||||
: video.status === 'draft'
|
||||
? 'bg-yellow-100 text-yellow-800'
|
||||
: 'bg-blue-100 text-blue-800'
|
||||
}`}
|
||||
>
|
||||
{video.status.charAt(0).toUpperCase() + video.status.slice(1)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-6 text-sm text-gray-600">
|
||||
<span>📅 {video.uploadDate}</span>
|
||||
<span>👁️ {video.views} views</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2 mt-4">
|
||||
<button
|
||||
onClick={() => handleEdit(video.id)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
|
||||
>
|
||||
<Edit3 size={16} />
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(video.id)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Chef Studio"
|
||||
columns={[
|
||||
{
|
||||
title: "Dashboard", items: [
|
||||
{ label: "My Videos", href: "/dashboard" },
|
||||
{ label: "Analytics", href: "#" },
|
||||
{ label: "Settings", href: "#" },
|
||||
{ label: "Upload", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Help Center", href: "#" },
|
||||
{ label: "Guidelines", href: "#" },
|
||||
{ label: "Best Practices", href: "#" },
|
||||
{ label: "FAQ", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Account", items: [
|
||||
{ label: "Profile", href: "#" },
|
||||
{ label: "Preferences", href: "#" },
|
||||
{ label: "Billing", href: "#" },
|
||||
{ label: "Logout", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "YouTube", href: "https://youtube.com" },
|
||||
{ label: "TikTok", href: "https://tiktok.com" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Chef Studio. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user