Updated the design step 1 is finsih now I'll check it with mohammed
هذا الالتزام موجود في:
@@ -1,217 +1,217 @@
|
||||
import React, { 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-6 py-8">
|
||||
<div className="flex gap-8">
|
||||
{/* Sidebar */}
|
||||
<div className="w-64 flex-shrink-0">
|
||||
<h1 className="text-3xl font-bold text-gray-900 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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
import React, { 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-6 py-8">
|
||||
<div className="flex gap-8">
|
||||
{/* Sidebar */}
|
||||
<div className="w-64 flex-shrink-0">
|
||||
<h1 className="text-3xl font-bold text-gray-900 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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
المرجع في مشكلة جديدة
حظر مستخدم