113 lines
3.1 KiB
JavaScript
113 lines
3.1 KiB
JavaScript
import React, { useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
import Hero from "../components/Hero";
|
|
import Coach from "../components/Coach";
|
|
import Events from "../components/Events";
|
|
|
|
const AdminDashboard = () => {
|
|
const [activeTab, setActiveTab] = useState("hero");
|
|
|
|
// Coach state
|
|
const [coaches, setCoaches] = useState([
|
|
{ name: "John Doe", title: "Head Coach" },
|
|
{ name: "Jane Smith", title: "Assistant Coach" },
|
|
]);
|
|
const [newCoach, setNewCoach] = useState({ name: "", title: "" });
|
|
|
|
const addCoach = () => {
|
|
if (newCoach.name && newCoach.title) {
|
|
setCoaches([...coaches, newCoach]);
|
|
setNewCoach({ name: "", title: "" });
|
|
}
|
|
};
|
|
|
|
const removeCoach = (index) => {
|
|
setCoaches(coaches.filter((_, i) => i !== index));
|
|
};
|
|
|
|
// Event state
|
|
const [events, setEvents] = useState([
|
|
{
|
|
title: "Team Meeting",
|
|
date: "2025-02-01",
|
|
description: "Monthly meeting.",
|
|
},
|
|
{
|
|
title: "Workshop",
|
|
date: "2025-02-05",
|
|
description: "Training workshop.",
|
|
},
|
|
]);
|
|
const [newEvent, setNewEvent] = useState({
|
|
title: "",
|
|
date: "",
|
|
description: "",
|
|
});
|
|
|
|
const addEvent = () => {
|
|
if (newEvent.title && newEvent.date && newEvent.description) {
|
|
setEvents([...events, newEvent]);
|
|
setNewEvent({ title: "", date: "", description: "" });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen w-full bg-black text-white">
|
|
<motion.div className="w-full">
|
|
<div className="bg-gray-900 p-6 shadow-lg">
|
|
<h1 className="text-3xl font-bold tracking-wide">Admin Dashboard</h1>
|
|
</div>
|
|
|
|
{/* Tab Navigation */}
|
|
<div className="flex justify-center mt-6 space-x-4">
|
|
{[
|
|
{ label: "Hero", value: "hero" },
|
|
{ label: "Coach", value: "coach" },
|
|
{ label: "Events", value: "calendar" },
|
|
].map((tab) => (
|
|
<button
|
|
key={tab.value}
|
|
onClick={() => setActiveTab(tab.value)}
|
|
className={`px-6 py-3 rounded-full text-sm cursor-pointer font-medium transition-all shadow-md focus:outline-none ${
|
|
activeTab === tab.value
|
|
? "bg-white text-black"
|
|
: "bg-gray-700 text-gray-300 hover:bg-gray-600"
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Tab Content */}
|
|
<motion.div key={activeTab} className="p-8">
|
|
{/* Hero Content */}
|
|
{activeTab === "hero" && <Hero />}
|
|
{/* Coach Content */}
|
|
{activeTab === "coach" && (
|
|
<Coach
|
|
coaches={coaches}
|
|
newCoach={newCoach}
|
|
setNewCoach={setNewCoach}
|
|
addCoach={addCoach}
|
|
removeCoach={removeCoach}
|
|
/>
|
|
)}
|
|
|
|
{/* Events Content */}
|
|
{activeTab === "calendar" && (
|
|
<Events
|
|
events={events}
|
|
newEvent={newEvent}
|
|
setNewEvent={setNewEvent}
|
|
addEvent={addEvent}
|
|
/>
|
|
)}
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AdminDashboard;
|