Update src/app/chef-profile/page.tsx
This commit is contained in:
@@ -1,66 +1,15 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { useState } from "react";
|
||||
import { Upload, Edit2, Trash2, Play, Pause, MoreVertical } from "lucide-react";
|
||||
|
||||
interface Video {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
thumbnail: string;
|
||||
duration: string;
|
||||
uploadDate: string;
|
||||
views: number;
|
||||
status: "published" | "draft" | "archived";
|
||||
}
|
||||
import { Star, Users, Heart, Mail } from "lucide-react";
|
||||
|
||||
export default function ChefProfilePage() {
|
||||
const [videos, setVideos] = useState<Video[]>([
|
||||
{
|
||||
id: "1", title: "Signature Skincare Routine", description: "Learn our 5-step skincare routine for glowing skin", thumbnail: "http://img.b2bpic.net/free-photo/model-career-kit-still-life-flat-lay_23-2150218023.jpg", duration: "12:34", uploadDate: "Jan 15, 2025", views: 2543,
|
||||
status: "published"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Ingredient Spotlight: Natural Botanicals", description: "Deep dive into our premium organic ingredients", thumbnail: "http://img.b2bpic.net/free-photo/flat-lay-hands-holding-body-care-product-wooden-background_23-2148241876.jpg", duration: "8:45", uploadDate: "Jan 12, 2025", views: 1876,
|
||||
status: "published"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Product Application Techniques", description: "Master the art of applying skincare products", thumbnail: "http://img.b2bpic.net/free-photo/product-branding-packaging_23-2150965833.jpg", duration: "15:22", uploadDate: "Jan 10, 2025", views: 3421,
|
||||
status: "published"
|
||||
},
|
||||
{
|
||||
id: "4", title: "Winter Skincare Tips", description: "Keep your skin glowing during cold months", thumbnail: "http://img.b2bpic.net/free-photo/woman-applying-moisturizer-her-beauty-routine_23-2150166464.jpg", duration: "10:15", uploadDate: "Jan 8, 2025", views: 0,
|
||||
status: "draft"
|
||||
}
|
||||
]);
|
||||
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [editData, setEditData] = useState({ title: "", description: "" });
|
||||
|
||||
const handleEdit = (video: Video) => {
|
||||
setEditingId(video.id);
|
||||
setEditData({ title: video.title, description: video.description });
|
||||
};
|
||||
|
||||
const handleSaveEdit = (id: string) => {
|
||||
setVideos(videos.map(v =>
|
||||
v.id === id ? { ...v, title: editData.title, description: editData.description } : v
|
||||
));
|
||||
setEditingId(null);
|
||||
};
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
setVideos(videos.filter(v => v.id !== id));
|
||||
};
|
||||
|
||||
const publishedVideos = videos.filter(v => v.status === "published");
|
||||
const draftVideos = videos.filter(v => v.status === "draft");
|
||||
const totalViews = videos.reduce((sum, v) => sum + v.views, 0);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
@@ -80,256 +29,140 @@ export default function ChefProfilePage() {
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{ text: "Shop Now", href: "/" }}
|
||||
brandName="Lumière Skin"
|
||||
button={{ text: "Follow Chef", href: "#" }}
|
||||
brandName="Chef Profile"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<div id="chef-info" data-section="chef-info">
|
||||
<HeroLogoBillboard
|
||||
logoText="Chef Profile & Video Management"
|
||||
description="Manage and showcase your video content. Track performance, edit details, and grow your audience."
|
||||
logoText="Chef Marcus"
|
||||
description="Award-winning culinary expert with 15+ years of experience in modern gastronomy. Specializing in innovative techniques and sustainable ingredient sourcing."
|
||||
buttons={[
|
||||
{ text: "Upload New Video", href: "#" },
|
||||
{ text: "Back to Home", href: "/" }
|
||||
{ text: "View Video History", href: "#videos" },
|
||||
{ text: "Subscribe", href: "#" }
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-applying-moisturizer-her-beauty-routine_23-2150166464.jpg"
|
||||
imageAlt="Chef profile"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-successful-man-chef-wearing-hat-standing-against-blurred-kitchen_23-2148381812.jpg"
|
||||
imageAlt="Chef Marcus Professional Portrait"
|
||||
mediaAnimation="slide-up"
|
||||
frameStyle="card"
|
||||
buttonAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section className="py-20 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Stats Section */}
|
||||
<div className="mb-12 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="p-6 rounded-lg bg-card border border-card">
|
||||
<h3 className="text-sm font-semibold text-foreground/60 mb-2">Total Videos</h3>
|
||||
<p className="text-4xl font-bold text-foreground">{videos.length}</p>
|
||||
</div>
|
||||
<div className="p-6 rounded-lg bg-card border border-card">
|
||||
<h3 className="text-sm font-semibold text-foreground/60 mb-2">Total Views</h3>
|
||||
<p className="text-4xl font-bold text-foreground">{totalViews.toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="p-6 rounded-lg bg-card border border-card">
|
||||
<h3 className="text-sm font-semibold text-foreground/60 mb-2">Published</h3>
|
||||
<p className="text-4xl font-bold text-foreground">{publishedVideos.length}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="stats" data-section="stats">
|
||||
<MetricCardThree
|
||||
metrics={[
|
||||
{ id: "1", icon: Users, title: "Followers", value: "245.8K" },
|
||||
{ id: "2", icon: Heart, title: "Engagement", value: "98.5%" },
|
||||
{ id: "3", icon: Star, title: "Chef Rating", value: "4.9/5" },
|
||||
{ id: "4", icon: Mail, title: "Videos", value: "156" }
|
||||
]}
|
||||
title="Chef Performance"
|
||||
description="Outstanding metrics showcasing chef excellence and community engagement."
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Published Videos */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-6">Published Videos</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{publishedVideos.map(video => (
|
||||
<div key={video.id} className="rounded-lg overflow-hidden bg-card border border-card hover:border-primary-cta/50 transition-all">
|
||||
{/* Thumbnail */}
|
||||
<div className="relative aspect-video overflow-hidden bg-background">
|
||||
<img
|
||||
src={video.thumbnail}
|
||||
alt={video.title}
|
||||
className="w-full h-full object-cover hover:scale-105 transition-transform"
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 hover:opacity-100 transition-opacity">
|
||||
<Play className="w-12 h-12 text-white fill-white" />
|
||||
</div>
|
||||
<div className="absolute bottom-2 right-2 bg-black/70 px-2 py-1 rounded text-xs text-white">
|
||||
{video.duration}
|
||||
</div>
|
||||
</div>
|
||||
<div id="videos" data-section="videos">
|
||||
<TeamCardOne
|
||||
members={[
|
||||
{
|
||||
id: "1", name: "Mastering Sauces", role: "Cooking Technique", imageSrc: "http://img.b2bpic.net/free-photo/professional-chef-preparing-delicious-food-kitchen-restaurant_23-2150887345.jpg", imageAlt: "Mastering Sauces Tutorial"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Plating Perfection", role: "Presentation Guide", imageSrc: "http://img.b2bpic.net/free-photo/chef-preparing-gourmet-dish-plating_23-2150887201.jpg", imageAlt: "Plating Perfection Workshop"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Farm to Table", role: "Sustainability Focus", imageSrc: "http://img.b2bpic.net/free-photo/fresh-vegetables-farm-market_23-2150887102.jpg", imageAlt: "Farm to Table Preparation"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Molecular Gastronomy", role: "Advanced Techniques", imageSrc: "http://img.b2bpic.net/free-photo/innovative-cooking-laboratory-style_23-2150887456.jpg", imageAlt: "Molecular Gastronomy Demo"
|
||||
}
|
||||
]}
|
||||
title="Recent Video History"
|
||||
description="Explore Chef Marcus's latest cooking tutorials and technique demonstrations."
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-4">
|
||||
{editingId === video.id ? (
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
value={editData.title}
|
||||
onChange={(e) => setEditData({...editData, title: e.target.value})}
|
||||
className="w-full bg-background border border-foreground/20 rounded px-2 py-1 text-foreground text-sm"
|
||||
/>
|
||||
<textarea
|
||||
value={editData.description}
|
||||
onChange={(e) => setEditData({...editData, description: e.target.value})}
|
||||
className="w-full bg-background border border-foreground/20 rounded px-2 py-1 text-foreground text-xs resize-none h-16"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handleSaveEdit(video.id)}
|
||||
className="flex-1 bg-primary-cta text-background px-3 py-1 rounded text-sm font-medium hover:opacity-90"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditingId(null)}
|
||||
className="flex-1 bg-secondary-cta text-foreground px-3 py-1 rounded text-sm font-medium hover:opacity-90"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<h3 className="font-semibold text-foreground mb-1 line-clamp-2">{video.title}</h3>
|
||||
<p className="text-xs text-foreground/60 mb-3 line-clamp-2">{video.description}</p>
|
||||
<div className="flex justify-between items-center mb-3 text-xs text-foreground/60">
|
||||
<span>{video.uploadDate}</span>
|
||||
<span>{video.views.toLocaleString()} views</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handleEdit(video)}
|
||||
className="flex-1 flex items-center justify-center gap-1 bg-secondary-cta text-foreground px-2 py-1 rounded text-xs font-medium hover:opacity-90 transition-opacity"
|
||||
>
|
||||
<Edit2 className="w-3 h-3" />
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(video.id)}
|
||||
className="flex-1 flex items-center justify-center gap-1 bg-accent/20 text-accent px-2 py-1 rounded text-xs font-medium hover:opacity-90 transition-opacity"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Draft Videos */}
|
||||
{draftVideos.length > 0 && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-6">Draft Videos</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{draftVideos.map(video => (
|
||||
<div key={video.id} className="rounded-lg overflow-hidden bg-card border border-card border-dashed opacity-75 hover:border-primary-cta/50 transition-all">
|
||||
{/* Thumbnail */}
|
||||
<div className="relative aspect-video overflow-hidden bg-background">
|
||||
<img
|
||||
src={video.thumbnail}
|
||||
alt={video.title}
|
||||
className="w-full h-full object-cover opacity-75"
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/50">
|
||||
<span className="text-white font-semibold">DRAFT</span>
|
||||
</div>
|
||||
<div className="absolute bottom-2 right-2 bg-black/70 px-2 py-1 rounded text-xs text-white">
|
||||
{video.duration}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-4">
|
||||
{editingId === video.id ? (
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
value={editData.title}
|
||||
onChange={(e) => setEditData({...editData, title: e.target.value})}
|
||||
className="w-full bg-background border border-foreground/20 rounded px-2 py-1 text-foreground text-sm"
|
||||
/>
|
||||
<textarea
|
||||
value={editData.description}
|
||||
onChange={(e) => setEditData({...editData, description: e.target.value})}
|
||||
className="w-full bg-background border border-foreground/20 rounded px-2 py-1 text-foreground text-xs resize-none h-16"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handleSaveEdit(video.id)}
|
||||
className="flex-1 bg-primary-cta text-background px-3 py-1 rounded text-sm font-medium hover:opacity-90"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditingId(null)}
|
||||
className="flex-1 bg-secondary-cta text-foreground px-3 py-1 rounded text-sm font-medium hover:opacity-90"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<h3 className="font-semibold text-foreground mb-1 line-clamp-2">{video.title}</h3>
|
||||
<p className="text-xs text-foreground/60 mb-3 line-clamp-2">{video.description}</p>
|
||||
<div className="flex justify-between items-center mb-3 text-xs text-foreground/60">
|
||||
<span>{video.uploadDate}</span>
|
||||
<span>Not published</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handleEdit(video)}
|
||||
className="flex-1 flex items-center justify-center gap-1 bg-secondary-cta text-foreground px-2 py-1 rounded text-xs font-medium hover:opacity-90 transition-opacity"
|
||||
>
|
||||
<Edit2 className="w-3 h-3" />
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(video.id)}
|
||||
className="flex-1 flex items-center justify-center gap-1 bg-accent/20 text-accent px-2 py-1 rounded text-xs font-medium hover:opacity-90 transition-opacity"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<div id="ratings" data-section="ratings">
|
||||
<TestimonialCardThirteen
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Emma Wilson", handle: "@emmachef", testimonial: "Chef Marcus's tutorials completely transformed my cooking skills. His attention to detail and passion for food is truly inspiring!", rating: 5,
|
||||
icon: Star
|
||||
},
|
||||
{
|
||||
id: "2", name: "James Chen", handle: "@jameskit", testimonial: "The molecular gastronomy series is mind-blowing. Professional, educational, and entertaining. Highly recommend!", rating: 5,
|
||||
icon: Star
|
||||
},
|
||||
{
|
||||
id: "3", name: "Sarah Johnson", handle: "@foodlover_sarah", testimonial: "I've learned more from Chef Marcus in two weeks than I did in a year of other cooking channels. Pure expertise!", rating: 5,
|
||||
icon: Star
|
||||
},
|
||||
{
|
||||
id: "4", name: "Michael Rodriguez", handle: "@mikecooking", testimonial: "The farm-to-table episode changed how I think about ingredient sourcing. Best culinary content creator out there.", rating: 5,
|
||||
icon: Star
|
||||
}
|
||||
]}
|
||||
showRating={true}
|
||||
title="Community Ratings & Reviews"
|
||||
description="See what followers love most about Chef Marcus's content and expertise."
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Lumière Skin"
|
||||
logoText="Chef Marcus"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "All Products", href: "/#products" },
|
||||
{ label: "Skincare Routine", href: "/#products" },
|
||||
{ label: "Collections", href: "/#products" },
|
||||
{ label: "Gift Sets", href: "/#products" }
|
||||
title: "Content", items: [
|
||||
{ label: "Cooking Tutorials", href: "#videos" },
|
||||
{ label: "Recipe Collections", href: "#" },
|
||||
{ label: "Technique Guides", href: "#" },
|
||||
{ label: "Live Streams", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/#about" },
|
||||
{ label: "Our Story", href: "/#about" },
|
||||
{ label: "Sustainability", href: "#" },
|
||||
{ label: "Careers", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "/#contact" },
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Shipping Info", href: "#" },
|
||||
{ label: "Returns", href: "#" }
|
||||
title: "About", items: [
|
||||
{ label: "Bio", href: "#chef-info" },
|
||||
{ label: "Achievements", href: "#" },
|
||||
{ label: "Experience", href: "#" },
|
||||
{ label: "Philosophy", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "YouTube", href: "https://youtube.com" },
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "Facebook", href: "https://facebook.com" },
|
||||
{ label: "Pinterest", href: "https://pinterest.com" },
|
||||
{ label: "TikTok", href: "https://tiktok.com" }
|
||||
{ label: "TikTok", href: "https://tiktok.com" },
|
||||
{ label: "Twitter", href: "https://twitter.com" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Merchandise", href: "#" },
|
||||
{ label: "Cookbooks", href: "#" },
|
||||
{ label: "Collaborations", href: "#" },
|
||||
{ label: "Contact", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Lumière Skin. All rights reserved."
|
||||
copyrightText="© 2025 Chef Marcus. All rights reserved. Culinary Excellence Worldwide."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user