ATTUNE-HEART-THERAPY/website
6
0
Fork 0
Code Issues 7 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat/authentication #5

Merged
ATS merged 10 commits from feat/authentication into master 2025-11-07 20:02:41 +00:00
Conversation 0 Commits 10 Files Changed 43 +26 -26
4 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3c27026371 - Show all commits

42
app/(admin)/_components/side-nav.tsx
View File

@ -63,21 +63,21 @@ export default function SideNav() {
{/* Side Navigation */} {/* Side Navigation */}
<aside <aside
className={`fixed top-0 left-0 z-50 h-screen bg-white border-r border-gray-200 flex flex-col transition-transform duration-200 w-[85vw] max-w-[250px] min-w-[200px] md:translate-x-0 md:w-[250px] md:min-w-[250px] md:max-w-[250px] ${ className={`fixed top-0 left-0 z-50 h-screen bg-white border-r border-gray-200 flex flex-col transition-transform duration-200 w-[85vw] max-w-[200px] min-w-[160px] md:translate-x-0 md:w-[200px] md:min-w-[200px] md:max-w-[200px] ${
open ? "translate-x-0" : "-translate-x-full" open ? "translate-x-0" : "-translate-x-full"
} md:translate-x-0`} } md:translate-x-0`}
> >
{/* Logo Section */} {/* Logo Section */}
<div className="flex-shrink-0 px-4 pb-4 flex flex-col gap-1 md:block mb-5 pt-16 md:pt-4"> <div className="flex-shrink-0 px-3 pb-4 flex flex-col gap-1 md:block mb-5 pt-16 md:pt-4">
<div className="flex items-center gap-3 mb-1 ml-4 md:ml-6"> <div className="flex items-center gap-2 mb-1 ml-2 md:ml-3">
<div className="flex items-center justify-center w-10 h-10 rounded-lg bg-gradient-to-br from-rose-100 to-pink-100"> <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-gradient-to-br from-rose-100 to-pink-100">
<Heart className="w-6 h-6 text-rose-600" fill="currentColor" /> <Heart className="w-5 h-5 text-rose-600" fill="currentColor" />
</div> </div>
<span className="text-lg font-semibold text-gray-900">Attune Heart</span> <span className="text-sm font-semibold text-gray-900">Attune Heart</span>
</div> </div>
</div> </div>
<hr className="flex-shrink-0 -mt-10 mb-4 mx-4 border-gray-200 md:block hidden" /> <hr className="flex-shrink-0 -mt-10 mb-4 mx-3 border-gray-200 md:block hidden" />
{/* Navigation Items */} {/* Navigation Items */}
<nav className="flex-1 overflow-y-auto flex flex-col gap-2 px-2 md:px-0"> <nav className="flex-1 overflow-y-auto flex flex-col gap-2 px-2 md:px-0">
@ -89,31 +89,31 @@ export default function SideNav() {
<div className="relative flex items-center w-full" key={item.label}> <div className="relative flex items-center w-full" key={item.label}>
{isActive && ( {isActive && (
<span <span
className="absolute left-0 top-0 h-[45px] w-[3px] bg-[#4A90A4]" className="absolute left-0 top-0 h-[40px] w-[3px] bg-gradient-to-b from-rose-500 to-pink-600"
style={{ left: 0 }} style={{ left: 0 }}
/> />
)} )}
<Link <Link
href={item.href} href={item.href}
onClick={() => setOpen(false)} onClick={() => setOpen(false)}
className={`group flex items-center gap-3 py-3 pl-4 md:pl-4 pr-4 md:pr-4 transition-colors duration-200 focus:outline-none w-[90%] md:w-[90%] ml-2 md:ml-4 cursor-pointer justify-start ${ className={`group flex items-center gap-2 py-2.5 pl-3 md:pl-3 pr-3 md:pr-3 transition-colors duration-200 focus:outline-none w-[90%] md:w-[90%] ml-1 md:ml-2 cursor-pointer justify-start ${
isActive isActive
? "bg-[#4A90A4] text-white border border-[#4A90A4] rounded-[5px] shadow-sm" ? "bg-gradient-to-r from-rose-500 to-pink-600 text-white border border-rose-500 rounded-[5px] shadow-sm"
: "bg-transparent text-gray-600 hover:bg-[#4A90A4]/10 hover:text-[#4A90A4] rounded-lg" : "bg-transparent text-gray-600 hover:bg-rose-50 hover:text-rose-600 rounded-lg"
}`} }`}
style={isActive ? { height: 45 } : {}} style={isActive ? { height: 40 } : {}}
> >
<Icon <Icon
size={20} size={18}
strokeWidth={isActive ? 2.2 : 1.5} strokeWidth={isActive ? 2.2 : 1.5}
className={ className={
isActive isActive
? "text-white" ? "text-white"
: "text-gray-700 group-hover:text-[#4A90A4]" : "text-gray-700 group-hover:text-rose-600"
} }
/> />
<span <span
className="font-light leading-none text-[13px] md:text-[13px]" className="font-light leading-none text-[12px] md:text-[12px]"
style={{ fontWeight: 300 }} style={{ fontWeight: 300 }}
> >
{item.label} {item.label}
@ -128,10 +128,10 @@ export default function SideNav() {
<Link <Link
href="/settings" href="/settings"
onClick={() => setOpen(false)} onClick={() => setOpen(false)}
className="group flex items-center gap-3 py-3 pl-4 md:pl-4 pr-4 md:pr-4 transition-colors duration-200 w-[90%] md:w-[90%] ml-2 md:ml-4 cursor-pointer justify-start text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-lg" className="group flex items-center gap-2 py-2.5 pl-3 md:pl-3 pr-3 md:pr-3 transition-colors duration-200 w-[90%] md:w-[90%] ml-1 md:ml-2 cursor-pointer justify-start text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-lg"
> >
<Settings size={20} strokeWidth={1.5} className="text-gray-700 group-hover:text-gray-900" /> <Settings size={18} strokeWidth={1.5} className="text-gray-700 group-hover:text-gray-900" />
<span className="font-light leading-none text-[13px]" style={{ fontWeight: 300 }}> <span className="font-light leading-none text-[12px]" style={{ fontWeight: 300 }}>
Settings Settings
</span> </span>
</Link> </Link>
@ -140,10 +140,10 @@ export default function SideNav() {
setOpen(false); setOpen(false);
// Handle logout // Handle logout
}} }}
className="group flex items-center gap-3 py-3 pl-4 md:pl-4 pr-4 md:pr-4 transition-colors duration-200 w-[90%] md:w-[90%] ml-2 md:ml-4 cursor-pointer justify-start text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-lg" className="group flex items-center gap-2 py-2.5 pl-3 md:pl-3 pr-3 md:pr-3 transition-colors duration-200 w-[90%] md:w-[90%] ml-1 md:ml-2 cursor-pointer justify-start text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-lg"
> >
<LogOut size={20} strokeWidth={1.5} className="text-gray-700 group-hover:text-gray-900" /> <LogOut size={18} strokeWidth={1.5} className="text-gray-700 group-hover:text-gray-900" />
<span className="font-light leading-none text-[13px]" style={{ fontWeight: 300 }}> <span className="font-light leading-none text-[12px]" style={{ fontWeight: 300 }}>
Logout Logout
</span> </span>
</button> </button>

2
app/(admin)/booking/page.tsx
View File

@ -8,7 +8,7 @@ export default function Booking() {
{/* Side Navigation */} {/* Side Navigation */}
<SideNav /> <SideNav />
<div className="md:ml-[250px]"> <div className="md:ml-[200px]">
<main className="p-4 sm:p-6 lg:p-8"> <main className="p-4 sm:p-6 lg:p-8">
</main> </main>
</div> </div>

2
app/(admin)/dashboard/page.tsx
View File

@ -8,7 +8,7 @@ export default function Dashboard() {
{/* Side Navigation */} {/* Side Navigation */}
<SideNav /> <SideNav />
<div className="md:ml-[250px]"> <div className="md:ml-[200px]">
{/* Main Content */} {/* Main Content */}
<main className="p-4 sm:p-6 lg:p-8"> <main className="p-4 sm:p-6 lg:p-8">
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1> <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>

6
app/(auth)/login/page.tsx
View File

@ -51,7 +51,7 @@ export default function Login() {
</Button> </Button>
{/* Heading */} {/* Heading */}
<h1 className="text-3xl font-bold text-black mb-2"> <h1 className="text-3xl font-bold bg-gradient-to-r from-rose-600 via-pink-600 to-rose-600 bg-clip-text text-transparent mb-2">
Welcome back Welcome back
</h1> </h1>
@ -112,7 +112,7 @@ export default function Login() {
{/* Submit Button */} {/* Submit Button */}
<Button <Button
type="submit" type="submit"
className="w-full h-12 text-base font-semibold bg-[#4A90A4] hover:bg-[#3a7a8a] text-white" className="w-full h-12 text-base font-semibold bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white shadow-lg hover:shadow-xl transition-all"
> >
Log in Log in
</Button> </Button>
@ -124,7 +124,7 @@ export default function Login() {
type="checkbox" type="checkbox"
checked={rememberMe} checked={rememberMe}
onChange={(e) => setRememberMe(e.target.checked)} onChange={(e) => setRememberMe(e.target.checked)}
className="w-4 h-4 rounded border-gray-300 text-[#4A90A4] focus:ring-2 focus:ring-[#4A90A4] cursor-pointer" className="w-4 h-4 rounded border-gray-300 text-rose-600 focus:ring-2 focus:ring-rose-500 cursor-pointer"
/> />
<span className="text-black">Remember me</span> <span className="text-black">Remember me</span>
</label> </label>