selimaj-dev/klayrion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui update

Browse Source
This commit is contained in:
selimaj-dev
2025-02-17 16:06:11 +01:00
parent c58ba460d5
commit 9684a18046
3 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/dashboard/page.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export default async function Dashboard() {
</div> </div>
<div className="w-full mt-5 flex gap-5 flex-col xl:flex-row"> <div className="w-full mt-5 flex gap-5 flex-col xl:flex-row">
<div className="flex flex-col w-full gap-5 xl:w-[400px]"> <div className="flex flex-col w-full gap-5 xl:w-[600px]">
<Ideas <Ideas
ideas={[ ideas={[
{ {
src/components/accountStatus.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export default function AccountStatus({
<CardTitle>Account status</CardTitle> <CardTitle>Account status</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="w-full h-[100px] grid gap-2 grid-cols-2"> <CardContent className="w-full h-[100px] grid gap-2 grid-cols-3">
{accounts.map((account, i) => ( {accounts.map((account, i) => (
<div key={i} className="flex"> <div key={i} className="flex">
{ {
src/components/app.tsx
+28 -15
View File
@@ -8,6 +8,7 @@ import {
SidebarMenu, SidebarMenu,
SidebarMenuItem, SidebarMenuItem,
SidebarMenuButton, SidebarMenuButton,
SidebarFooter,
} from '@/components/ui/sidebar'; } from '@/components/ui/sidebar';
import { Calendar, LayoutDashboardIcon, Settings } from 'lucide-react'; import { Calendar, LayoutDashboardIcon, Settings } from 'lucide-react';
@@ -25,6 +26,9 @@ const items = [
url: '/calendar', url: '/calendar',
icon: Calendar, icon: Calendar,
}, },
];
const footer = [
{ {
title: 'Settings', title: 'Settings',
url: '/settings', url: '/settings',
@@ -35,9 +39,9 @@ const items = [
export default function App({ children }: { children?: any }) { export default function App({ children }: { children?: any }) {
return ( return (
<div className="flex w-full"> <div className="flex w-full">
<div> <div className='md:w-28'>
<SidebarProvider> <SidebarProvider>
<Sidebar> <Sidebar className="w-28">
<SidebarContent> <SidebarContent>
<SidebarGroup> <SidebarGroup>
<SidebarGroupLabel> <SidebarGroupLabel>
@@ -45,25 +49,34 @@ export default function App({ children }: { children?: any }) {
</SidebarGroupLabel> </SidebarGroupLabel>
<SidebarGroupContent> <SidebarGroupContent>
<SidebarMenu> <SidebarMenu>
{items.map((item) => ( {items.map((item, i) => (
<SidebarMenuItem key={item.title}> <SidebarMenuItem
<SidebarMenuButton asChild> key={i}
<Link className="w-16 mx-auto"
href={item.url} >
className="font-semibold" <Link href={item.url}>
> <item.icon className="!size-full p-4 hover:bg-foreground hover:text-background rounded-2xl" />
<item.icon /> </Link>
<span>
{item.title}
</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
))} ))}
</SidebarMenu> </SidebarMenu>
</SidebarGroupContent> </SidebarGroupContent>
</SidebarGroup> </SidebarGroup>
</SidebarContent> </SidebarContent>
<SidebarFooter className='mb-4'>
<SidebarMenu>
{footer.map((item, i) => (
<SidebarMenuItem
key={i}
className="w-16 mx-auto"
>
<Link href={item.url}>
<item.icon className="!size-full p-4 hover:bg-foreground hover:text-background rounded-2xl" />
</Link>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarFooter>
</Sidebar> </Sidebar>
</SidebarProvider> </SidebarProvider>
</div> </div>