نسخ من mohammedsaid18/dashboard
280 أسطر
13 KiB
TypeScript
280 أسطر
13 KiB
TypeScript
import { useState } from 'react';
|
|
|
|
const Settings = () => {
|
|
const [activeSection, setActiveSection] = useState("profile");
|
|
const [activeSubSection, setActiveSubSection] = useState("payment-history");
|
|
|
|
const sidebarItems = [
|
|
{
|
|
id: "profile",
|
|
label: "Profile",
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
|
|
</svg>
|
|
),
|
|
hasSubItems: false
|
|
},
|
|
{
|
|
id: "campaigns",
|
|
label: "Campaigns",
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
|
|
</svg>
|
|
),
|
|
hasSubItems: false
|
|
},
|
|
{
|
|
id: "billing",
|
|
label: "Billing",
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
|
|
<path fillRule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clipRule="evenodd" />
|
|
</svg>
|
|
),
|
|
hasSubItems: true,
|
|
subItems: [
|
|
"Billing info",
|
|
"Update",
|
|
"Monthly Engagement",
|
|
"Billing Date",
|
|
"Payment History",
|
|
"Cancel Membership"
|
|
]
|
|
},
|
|
{
|
|
id: "help-desk",
|
|
label: "Help Desk",
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
|
|
</svg>
|
|
),
|
|
hasSubItems: false
|
|
},
|
|
{
|
|
id: "feature-request",
|
|
label: "Feature Request",
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z" clipRule="evenodd" />
|
|
</svg>
|
|
),
|
|
hasSubItems: false
|
|
}
|
|
];
|
|
|
|
const handleSectionClick = (sectionId: string) => {
|
|
setActiveSection(sectionId);
|
|
if (sectionId === "billing") {
|
|
setActiveSubSection("payment-history");
|
|
}
|
|
};
|
|
|
|
const handleSubSectionClick = (subSection: string) => {
|
|
setActiveSubSection(subSection);
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
|
|
<div className="flex flex-col lg:flex-row gap-8">
|
|
{/* Sidebar */}
|
|
<div className="w-full lg:w-64 flex-shrink-0">
|
|
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-6 lg:mb-8">Settings</h1>
|
|
|
|
<nav className="space-y-2">
|
|
{sidebarItems.map((item) => (
|
|
<div key={item.id}>
|
|
<button
|
|
onClick={() => handleSectionClick(item.id)}
|
|
className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-left transition-colors ${
|
|
activeSection === item.id
|
|
? "bg-blue-50 text-blue-600"
|
|
: "text-gray-700 hover:bg-gray-50"
|
|
}`}
|
|
>
|
|
{item.icon}
|
|
<span className="font-medium">{item.label}</span>
|
|
{item.hasSubItems && (
|
|
<svg className="w-4 h-4 ml-auto" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
|
|
{item.hasSubItems && activeSection === item.id && (
|
|
<div className="ml-8 mt-2 space-y-1">
|
|
{item.subItems?.map((subItem) => (
|
|
<button
|
|
key={subItem}
|
|
onClick={() => handleSubSectionClick(subItem.toLowerCase().replace(/\s+/g, "-"))}
|
|
className={`w-full flex items-center px-4 py-2 rounded-lg text-left transition-colors ${
|
|
activeSubSection === subItem.toLowerCase().replace(/\s+/g, "-")
|
|
? "bg-blue-600 text-white"
|
|
: "text-gray-600 hover:bg-gray-50"
|
|
}`}
|
|
>
|
|
{activeSubSection === subItem.toLowerCase().replace(/\s+/g, "-") && (
|
|
<div className="w-1 h-6 bg-blue-600 rounded-full mr-3"></div>
|
|
)}
|
|
<span className="text-sm">{subItem}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1">
|
|
{activeSection === "profile" && (
|
|
<div className="bg-white">
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-2">Basic Information</h2>
|
|
<p className="text-gray-600 mb-8">
|
|
View and update your personal details and account information.
|
|
</p>
|
|
|
|
<form className="space-y-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
defaultValue="Eugiene Jonathan"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
defaultValue="Eugiene Jonathan"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
defaultValue="Eugiene Jonathan"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Member Since
|
|
</label>
|
|
<input
|
|
type="text"
|
|
defaultValue="12 Aug 2025"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
<div className="flex items-center space-x-2">
|
|
<span>Total Keywords Campaigns</span>
|
|
<svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
defaultValue="234,029"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<button
|
|
type="submit"
|
|
className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
{activeSection === "campaigns" && (
|
|
<div className="bg-white">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
|
|
<div>
|
|
<h2 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">Campaigns</h2>
|
|
<p className="text-sm sm:text-base text-gray-600">
|
|
Manage your keyword campaigns and track performance.
|
|
</p>
|
|
</div>
|
|
<button className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors whitespace-nowrap self-start sm:self-auto">
|
|
Create Campaign
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{[
|
|
{ name: "Summer Sale 2025", keywords: 127, status: "Active", performance: "+12.5%" },
|
|
{ name: "Product Launch Q3", keywords: 89, status: "Active", performance: "+8.3%" },
|
|
{ name: "Brand Awareness", keywords: 234, status: "Paused", performance: "+5.2%" },
|
|
{ name: "Holiday Campaign", keywords: 156, status: "Active", performance: "+15.7%" },
|
|
].map((campaign, index) => (
|
|
<div key={index} className="border border-gray-200 rounded-lg p-4 sm:p-6 hover:border-blue-300 transition-colors">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div className="flex-1">
|
|
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mb-2">
|
|
<h3 className="text-base sm:text-lg font-semibold text-gray-900">{campaign.name}</h3>
|
|
<span className={`px-3 py-1 rounded-full text-xs font-medium self-start ${
|
|
campaign.status === "Active"
|
|
? "bg-green-100 text-green-700"
|
|
: "bg-yellow-100 text-yellow-700"
|
|
}`}>
|
|
{campaign.status}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-6 text-sm text-gray-600">
|
|
<span>{campaign.keywords} keywords</span>
|
|
<span className="flex items-center space-x-1">
|
|
<span>Performance:</span>
|
|
<span className="text-green-600 font-medium">{campaign.performance}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<button className="p-2 text-gray-400 hover:text-blue-600 transition-colors">
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
|
</svg>
|
|
</button>
|
|
<button className="p-2 text-gray-400 hover:text-red-600 transition-colors">
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Settings; |