Merge version_2 into main #2
183
src/app/page.tsx
183
src/app/page.tsx
@@ -6,8 +6,59 @@ import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCa
|
||||
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
|
||||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function CreatorDashboard() {
|
||||
const [metrics, setMetrics] = useState([
|
||||
{
|
||||
id: "1", title: "Total Earnings", subtitle: "Revenue from all services and products", category: "Revenue", value: "$12,450.50", buttons: [{ text: "View Details", href: "#" }],
|
||||
},
|
||||
{
|
||||
id: "2", title: "Subscriber Count", subtitle: "Active engaged community members", category: "Community", value: "3,847", buttons: [{ text: "Manage Subs", href: "#" }],
|
||||
},
|
||||
{
|
||||
id: "3", title: "Profile Views", subtitle: "Total visits to your profile this month", category: "Engagement", value: "15,230", buttons: [{ text: "Analyze", href: "#" }],
|
||||
},
|
||||
{
|
||||
id: "4", title: "Conversion Rate", subtitle: "Percentage of visitors becoming subscribers", category: "Growth", value: "8.4%", buttons: [{ text: "Optimize", href: "#" }],
|
||||
},
|
||||
]);
|
||||
|
||||
const [profilePhoto, setProfilePhoto] = useState(
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AeufBStYsT20rVSz6VwZGbgKZJ/a-modern-creator-dashboard-interface-wit-1772965513803-84c53169.png"
|
||||
);
|
||||
|
||||
const [isEditingMetric, setIsEditingMetric] = useState<string | null>(null);
|
||||
const [editValue, setEditValue] = useState("");
|
||||
const [isEditingPhoto, setIsEditingPhoto] = useState(false);
|
||||
const [photoUrl, setPhotoUrl] = useState(profilePhoto);
|
||||
|
||||
const handleMetricEdit = (metricId: string) => {
|
||||
const metric = metrics.find(m => m.id === metricId);
|
||||
if (metric) {
|
||||
setIsEditingMetric(metricId);
|
||||
setEditValue(metric.value);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMetricSave = (metricId: string) => {
|
||||
setMetrics(metrics.map(m =>
|
||||
m.id === metricId ? { ...m, value: editValue } : m
|
||||
));
|
||||
setIsEditingMetric(null);
|
||||
setEditValue("");
|
||||
};
|
||||
|
||||
const handlePhotoEdit = () => {
|
||||
setIsEditingPhoto(true);
|
||||
setPhotoUrl(profilePhoto);
|
||||
};
|
||||
|
||||
const handlePhotoSave = () => {
|
||||
setProfilePhoto(photoUrl);
|
||||
setIsEditingPhoto(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
@@ -32,49 +83,121 @@ export default function CreatorDashboard() {
|
||||
]}
|
||||
brandName="CreatorHub"
|
||||
button={{
|
||||
text: "Sign In", href: "#"}}
|
||||
text: "Sign In", href: "#"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="CREATOR DASHBOARD"
|
||||
description="Track your earnings, subscribers, and profile engagement in real-time with advanced analytics and customizable peak usage graphs."
|
||||
buttons={[
|
||||
{ text: "View Dashboard", href: "#analytics" },
|
||||
{ text: "Learn More", href: "#features" },
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AeufBStYsT20rVSz6VwZGbgKZJ/a-modern-creator-dashboard-interface-wit-1772965513803-84c53169.png", imageAlt: "Creator dashboard interface with metrics"},
|
||||
]}
|
||||
autoplayDelay={5000}
|
||||
showDimOverlay={true}
|
||||
/>
|
||||
<div className="relative">
|
||||
<HeroCarouselLogo
|
||||
logoText="CREATOR DASHBOARD"
|
||||
description="Track your earnings, subscribers, and profile engagement in real-time with advanced analytics and customizable peak usage graphs."
|
||||
buttons={[
|
||||
{ text: "View Dashboard", href: "#analytics" },
|
||||
{ text: "Learn More", href: "#features" },
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: profilePhoto,
|
||||
imageAlt: "Creator dashboard interface with metrics"},
|
||||
]}
|
||||
autoplayDelay={5000}
|
||||
showDimOverlay={true}
|
||||
/>
|
||||
<div className="absolute top-4 right-4 z-10">
|
||||
<button
|
||||
onClick={handlePhotoEdit}
|
||||
className="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition"
|
||||
>
|
||||
Edit Photo
|
||||
</button>
|
||||
</div>
|
||||
{isEditingPhoto && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg">
|
||||
<h3 className="text-lg font-semibold mb-4">Edit Profile Photo URL</h3>
|
||||
<input
|
||||
type="text"
|
||||
value={photoUrl}
|
||||
onChange={(e) => setPhotoUrl(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded mb-4"
|
||||
placeholder="Enter photo URL"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handlePhotoSave}
|
||||
className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsEditingPhoto(false)}
|
||||
className="px-4 py-2 bg-gray-400 text-white rounded hover:bg-gray-500 transition"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTen
|
||||
title="Your Performance Overview"
|
||||
description="Monitor your key metrics at a glance. Real-time data showing your earnings, subscriber growth, and profile engagement."
|
||||
description="Monitor your key metrics at a glance. Real-time data showing your earnings, subscriber growth, and profile engagement. Click any value to edit."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", title: "Total Earnings", subtitle: "Revenue from all services and products", category: "Revenue", value: "$12,450.50", buttons: [{ text: "View Details", href: "#" }],
|
||||
},
|
||||
{
|
||||
id: "2", title: "Subscriber Count", subtitle: "Active engaged community members", category: "Community", value: "3,847", buttons: [{ text: "Manage Subs", href: "#" }],
|
||||
},
|
||||
{
|
||||
id: "3", title: "Profile Views", subtitle: "Total visits to your profile this month", category: "Engagement", value: "15,230", buttons: [{ text: "Analyze", href: "#" }],
|
||||
},
|
||||
{
|
||||
id: "4", title: "Conversion Rate", subtitle: "Percentage of visitors becoming subscribers", category: "Growth", value: "8.4%", buttons: [{ text: "Optimize", href: "#" }],
|
||||
},
|
||||
]}
|
||||
metrics={metrics.map(metric => ({
|
||||
...metric,
|
||||
buttons: [
|
||||
{
|
||||
text: isEditingMetric === metric.id ? "Save" : "Edit", onClick: () => {
|
||||
if (isEditingMetric === metric.id) {
|
||||
handleMetricSave(metric.id);
|
||||
} else {
|
||||
handleMetricEdit(metric.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}))}
|
||||
/>
|
||||
{isEditingMetric && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg">
|
||||
<h3 className="text-lg font-semibold mb-4">Edit Metric Value</h3>
|
||||
<input
|
||||
type="text"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded mb-4"
|
||||
placeholder="Enter new value"
|
||||
autoFocus
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handleMetricSave(isEditingMetric)}
|
||||
className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsEditingMetric(null);
|
||||
setEditValue("");
|
||||
}}
|
||||
className="px-4 py-2 bg-gray-400 text-white rounded hover:bg-gray-500 transition"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div id="analytics" data-section="analytics">
|
||||
|
||||
Reference in New Issue
Block a user