Panel CSS Fix and Account Path Update
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from '@/components/theme-provider';
|
||||
import { ClerkProvider } from '@clerk/nextjs';
|
||||
|
||||
import '../globals.css'
|
||||
|
||||
@@ -12,9 +13,11 @@ export default function RootLayout({
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<ClerkProvider>
|
||||
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
</ClerkProvider>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import { useUser } from '@clerk/nextjs';
|
||||
import { Button } from '../../../components/ui/button';
|
||||
import { Input } from '../../../components/ui/input';
|
||||
import { Label } from '../../../components/ui/label';
|
||||
import { Card, CardHeader, CardContent, CardFooter } from '../../../components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Card, CardHeader, CardContent, CardFooter } from '@/components/ui/card';
|
||||
|
||||
const AccountPage = () => {
|
||||
const { user } = useUser();
|
||||
@@ -3,12 +3,12 @@
|
||||
export default function Dashboard() {
|
||||
return (
|
||||
<div className="container mx-auto">
|
||||
<h1 className="text-3xl font-semibold text-white mb-6">Dashboard</h1>
|
||||
<h1 className="text-3xl font-semibold mb-6">Dashboard</h1>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div key={i} className="bg-white rounded-lg shadow-md p-6">
|
||||
<div key={i} className="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6">
|
||||
<h2 className="text-xl font-semibold mb-4">Card {i + 1}</h2>
|
||||
<p className="text-gray-600">This is some placeholder content for Card {i + 1}.</p>
|
||||
<p className="">This is some placeholder content for Card {i + 1}.</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,7 @@ export default function RootLayout({
|
||||
<Sidebar/>
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
<Navbar />
|
||||
<main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-200 p-6">
|
||||
<main className="flex-1 overflow-x-hidden overflow-y-auto text-black dark:text-white bg-neutral-100 dark:bg-neutral-900 p-6">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
18
src/app/(panels)/suite/patient/dashboard/page.tsx
Normal file
18
src/app/(panels)/suite/patient/dashboard/page.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
"use client"
|
||||
|
||||
export default function Dashboard() {
|
||||
return (
|
||||
<div className="container mx-auto">
|
||||
<h1 className="text-3xl font-semibold mb-6">Dashboard</h1>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div key={i} className="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6">
|
||||
<h2 className="text-xl font-semibold mb-4">Card {i + 1}</h2>
|
||||
<p className="">This is some placeholder content for Card {i + 1}.</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,11 +1,26 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import Sidebar from "@/components/panel-ui/patient/app-sidebar"
|
||||
import Navbar from "@/components/panel-ui/patient/app-navbar"
|
||||
import { SidebarProvider } from "@/components/ui/sidebar"
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
const [isSidebarOpen] = useState(true)
|
||||
|
||||
return (
|
||||
<section>{children}</section>
|
||||
<SidebarProvider defaultOpen={isSidebarOpen} >
|
||||
<Sidebar/>
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
<Navbar />
|
||||
<main className="flex-1 overflow-x-hidden overflow-y-auto text-black dark:text-white bg-neutral-100 dark:bg-neutral-900 p-6">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</SidebarProvider>
|
||||
)
|
||||
}
|
||||
@@ -18,14 +18,14 @@ import { ModeToggle } from "@/components/theme-toggle"
|
||||
export default function Navbar() {
|
||||
return (
|
||||
|
||||
<nav className="bg-white shadow-md">
|
||||
<nav className="bg-white dark:bg-neutral-800 dark:text-white">
|
||||
<div className="container mx-auto px-6 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<SidebarTrigger className="text-gray-500 focus:outline-none focus:text-gray-600">
|
||||
<SidebarTrigger className="text-gray-200 focus:outline-none focus:text-gray-300">
|
||||
<Menu className="h-6 w-6" />
|
||||
</SidebarTrigger>
|
||||
<span className="ml-4 text-xl font-semibold text-gray-800">My Dashboard</span>
|
||||
<span className="ml-4 text-xl font-semibold">My Dashboard</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center lg:order-2">
|
||||
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
|
||||
export default function Sidebar() {
|
||||
return (
|
||||
<ShadcnSidebar>
|
||||
<ShadcnSidebar className="dark:bg-neutral-800">
|
||||
<SidebarHeader>
|
||||
<h2 className="text-xl font-bold p-4">Dashboard</h2>
|
||||
</SidebarHeader>
|
||||
@@ -22,7 +22,7 @@ export default function Sidebar() {
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild>
|
||||
<Link href="/dashboard">
|
||||
<Link href="/suite/doctor/dashboard">
|
||||
<Home className="mr-2 h-4 w-4" />
|
||||
<span>Home</span>
|
||||
</Link>
|
||||
@@ -30,17 +30,17 @@ export default function Sidebar() {
|
||||
</SidebarMenuItem>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild>
|
||||
<Link href="/dashboard/users">
|
||||
<Link href="/suite/doctor/patients">
|
||||
<Users className="mr-2 h-4 w-4" />
|
||||
<span>Users</span>
|
||||
<span>Patient</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild>
|
||||
<Link href="/dashboard/settings">
|
||||
<Link href="/suite/doctor/account">
|
||||
<Settings className="mr-2 h-4 w-4" />
|
||||
<span>Settings</span>
|
||||
<span>Account</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
|
||||
58
src/components/panel-ui/patient/app-navbar.tsx
Normal file
58
src/components/panel-ui/patient/app-navbar.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { Bell, User } from "lucide-react"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
|
||||
import { Menu } from "lucide-react"
|
||||
import { SidebarTrigger } from "@/components/ui/sidebar"
|
||||
|
||||
import { ModeToggle } from "@/components/theme-toggle"
|
||||
|
||||
export default function Navbar() {
|
||||
return (
|
||||
|
||||
<nav className="bg-white dark:bg-neutral-800 dark:text-white">
|
||||
<div className="container mx-auto px-6 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<SidebarTrigger className="text-gray-200 focus:outline-none focus:text-gray-300">
|
||||
<Menu className="h-6 w-6" />
|
||||
</SidebarTrigger>
|
||||
<span className="ml-4 text-xl font-semibold">My Dashboard</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center lg:order-2">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Bell className="h-5 w-5" />
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<User className="h-5 w-5" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Profile</DropdownMenuItem>
|
||||
<DropdownMenuItem>Settings</DropdownMenuItem>
|
||||
<DropdownMenuItem>Sign out</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<ModeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
52
src/components/panel-ui/patient/app-sidebar.tsx
Normal file
52
src/components/panel-ui/patient/app-sidebar.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
"use client"
|
||||
|
||||
import { Home, Settings, Users } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
import {
|
||||
Sidebar as ShadcnSidebar,
|
||||
SidebarContent,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "@/components/ui/sidebar"
|
||||
|
||||
export default function Sidebar() {
|
||||
return (
|
||||
<ShadcnSidebar className="dark:bg-neutral-800">
|
||||
<SidebarHeader>
|
||||
<h2 className="text-xl font-bold p-4">Dashboard</h2>
|
||||
</SidebarHeader>
|
||||
<SidebarContent>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild>
|
||||
<Link href="/dashboard">
|
||||
<Home className="mr-2 h-4 w-4" />
|
||||
<span>Home</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild>
|
||||
<Link href="/dashboard/users">
|
||||
<Users className="mr-2 h-4 w-4" />
|
||||
<span>Users</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild>
|
||||
<Link href="/dashboard/settings">
|
||||
<Settings className="mr-2 h-4 w-4" />
|
||||
<span>Settings</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarContent>
|
||||
</ShadcnSidebar>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user