Hackathons/HoyaHax2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Panel CSS Fix and Account Path Update

Browse Source
This commit is contained in:
Sir Blob
2025-01-25 10:17:47 -05:00
parent 027b895c5f
commit 891c313d59
10 changed files with 168 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/(panels)/layout.tsx
View File

@@ -1,6 +1,7 @@
"use client" "use client"
import { ThemeProvider } from '@/components/theme-provider'; import { ThemeProvider } from '@/components/theme-provider';
import { ClerkProvider } from '@clerk/nextjs';
import '../globals.css' import '../globals.css'
@@ -12,9 +13,11 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<body> <body>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange> <ClerkProvider>
{children} <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
</ThemeProvider> {children}
</ThemeProvider>
</ClerkProvider>
</body> </body>
</html> </html>
) )

8
src/app/(web)/account/page.jsx → src/app/(panels)/suite/doctor/account/page.jsx
View File

@@ -2,10 +2,10 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import { useUser } from '@clerk/nextjs'; import { useUser } from '@clerk/nextjs';
import { Button } from '../../../components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '../../../components/ui/input'; import { Input } from '@/components/ui/input';
import { Label } from '../../../components/ui/label'; import { Label } from '@/components/ui/label';
import { Card, CardHeader, CardContent, CardFooter } from '../../../components/ui/card'; import { Card, CardHeader, CardContent, CardFooter } from '@/components/ui/card';
const AccountPage = () => { const AccountPage = () => {
const { user } = useUser(); const { user } = useUser();

6
src/app/(panels)/suite/doctor/dashboard/page.tsx
View File

@@ -3,12 +3,12 @@
export default function Dashboard() { export default function Dashboard() {
return ( return (
<div className="container mx-auto"> <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"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[...Array(6)].map((_, i) => ( {[...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> <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>
))} ))}
</div> </div>

2
src/app/(panels)/suite/doctor/layout.tsx
View File

@@ -17,7 +17,7 @@ export default function RootLayout({
<Sidebar/> <Sidebar/>
<div className="flex-1 flex flex-col overflow-hidden"> <div className="flex-1 flex flex-col overflow-hidden">
<Navbar /> <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} {children}
</main> </main>
</div> </div>

18
src/app/(panels)/suite/patient/dashboard/page.tsx Normal file
View 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>
)
}

19
src/app/(panels)/suite/patient/layout.tsx
View File

@@ -1,11 +1,26 @@
"use client" "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({ export default function RootLayout({
children, children,
}: { }: {
children: React.ReactNode children: React.ReactNode
}) { }) {
const [isSidebarOpen] = useState(true)
return ( 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>
) )
} }

6
src/components/panel-ui/doctor/app-navbar.tsx
View File

@@ -18,14 +18,14 @@ import { ModeToggle } from "@/components/theme-toggle"
export default function Navbar() { export default function Navbar() {
return ( 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="container mx-auto px-6 py-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center"> <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" /> <Menu className="h-6 w-6" />
</SidebarTrigger> </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>
<div className="flex items-center"> <div className="flex items-center">
<div className="flex items-center lg:order-2"> <div className="flex items-center lg:order-2">

12
src/components/panel-ui/doctor/app-sidebar.tsx
View File

@@ -14,7 +14,7 @@ import {
export default function Sidebar() { export default function Sidebar() {
return ( return (
<ShadcnSidebar> <ShadcnSidebar className="dark:bg-neutral-800">
<SidebarHeader> <SidebarHeader>
<h2 className="text-xl font-bold p-4">Dashboard</h2> <h2 className="text-xl font-bold p-4">Dashboard</h2>
</SidebarHeader> </SidebarHeader>
@@ -22,7 +22,7 @@ export default function Sidebar() {
<SidebarMenu> <SidebarMenu>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild> <SidebarMenuButton asChild>
<Link href="/dashboard"> <Link href="/suite/doctor/dashboard">
<Home className="mr-2 h-4 w-4" /> <Home className="mr-2 h-4 w-4" />
<span>Home</span> <span>Home</span>
</Link> </Link>
@@ -30,17 +30,17 @@ export default function Sidebar() {
</SidebarMenuItem> </SidebarMenuItem>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild> <SidebarMenuButton asChild>
<Link href="/dashboard/users"> <Link href="/suite/doctor/patients">
<Users className="mr-2 h-4 w-4" /> <Users className="mr-2 h-4 w-4" />
<span>Users</span> <span>Patient</span>
</Link> </Link>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton asChild> <SidebarMenuButton asChild>
<Link href="/dashboard/settings"> <Link href="/suite/doctor/account">
<Settings className="mr-2 h-4 w-4" /> <Settings className="mr-2 h-4 w-4" />
<span>Settings</span> <span>Account</span>
</Link> </Link>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>

58
src/components/panel-ui/patient/app-navbar.tsx Normal file
View 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
View 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>
)
}