Skip to content

Commit

Permalink
Rid tables of shadows
Browse files Browse the repository at this point in the history
  • Loading branch information
@koredefashokun
koredefashokun committed Jan 8, 2025
1 parent 35cff6b commit 55f2bb9
Show file tree
Hide file tree
Showing 19 changed files with 222 additions and 167 deletions.
2 changes: 2 additions & 0 deletions apps/admin/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"dayjs": "^1.11.13",
"lucide-react": "^0.469.0",
"next": "15.1.3",
"next-themes": "^0.4.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwind-merge": "^2.5.2",
Expand All @@ -39,6 +40,7 @@
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"autoprefixer": "^10.4.20",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
Expand Down
2 changes: 1 addition & 1 deletion apps/admin/src/app/dashboard/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function DashboardLayout({
return (
<SidebarProvider>
<AppSidebar />
<main className='flex-1 p-8 bg-gray-100 dark:bg-gray-800'>
<main className='flex-1 p-8 bg-gray-100 dark:bg-zinc-950'>
{children}
</main>
</SidebarProvider>
Expand Down
112 changes: 55 additions & 57 deletions apps/admin/src/app/dashboard/orders/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,67 +32,65 @@ export default function OrdersPage() {
<h1 className='text-3xl font-bold'>Orders</h1>
</div>

<div className='bg-white dark:bg-gray-900 shadow rounded-lg'>
<Table>
<TableHeader>
<Table>
<TableHeader>
<TableRow>
<TableHead>Order ID</TableHead>
<TableHead>Customer</TableHead>
<TableHead>Store</TableHead>
<TableHead>Status</TableHead>
<TableHead>Total</TableHead>
<TableHead>Date</TableHead>
<TableHead>Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>
<TableHead>Order ID</TableHead>
<TableHead>Customer</TableHead>
<TableHead>Store</TableHead>
<TableHead>Status</TableHead>
<TableHead>Total</TableHead>
<TableHead>Date</TableHead>
<TableHead>Actions</TableHead>
<TableCell colSpan={7} className='text-center'>
Loading...
</TableCell>
</TableRow>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>
<TableCell colSpan={7} className='text-center'>
Loading...
) : (
data?.orders?.map(order => (
<TableRow key={order.id}>
<TableCell>{order.id}</TableCell>
<TableCell>{order.user.name}</TableCell>
<TableCell>{order.store.name}</TableCell>
<TableCell>
<Badge
variant={
statusVariants[
order.status as keyof typeof statusVariants
]
}
>
{order.status}
</Badge>
</TableCell>
</TableRow>
) : (
data?.orders?.map(order => (
<TableRow key={order.id}>
<TableCell>{order.id}</TableCell>
<TableCell>{order.user.name}</TableCell>
<TableCell>{order.store.name}</TableCell>
<TableCell>
<Badge
variant={
statusVariants[
order.status as keyof typeof statusVariants
]
}
<TableCell>${order.total.toFixed(2)}</TableCell>
<TableCell>
{new Date(order.createdAt).toLocaleDateString()}
</TableCell>
<TableCell>
<div className='flex gap-2'>
<Button
variant='ghost'
size='sm'
className='h-8 w-8 p-0'
asChild
>
{order.status}
</Badge>
</TableCell>
<TableCell>${order.total.toFixed(2)}</TableCell>
<TableCell>
{new Date(order.createdAt).toLocaleDateString()}
</TableCell>
<TableCell>
<div className='flex gap-2'>
<Button
variant='ghost'
size='sm'
className='h-8 w-8 p-0'
asChild
>
<Link href={`/dashboard/orders/${order.id}`}>
<Eye className='h-4 w-4' />
</Link>
</Button>
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
<Link href={`/dashboard/orders/${order.id}`}>
<Eye className='h-4 w-4' />
</Link>
</Button>
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
);
}
82 changes: 40 additions & 42 deletions apps/admin/src/app/dashboard/stores/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,52 +23,50 @@ export default function StoresPage() {
<h1 className='text-3xl font-bold'>Stores</h1>
</div>

<div className='bg-white dark:bg-gray-900 shadow rounded-lg'>
<Table>
<TableHeader>
<Table>
<TableHeader>
<TableRow>
<TableHead>Store Name</TableHead>
<TableHead>Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>
<TableHead>Store Name</TableHead>
<TableHead>Actions</TableHead>
<TableCell colSpan={5} className='text-center'>
Loading...
</TableCell>
</TableRow>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>
<TableCell colSpan={5} className='text-center'>
Loading...
) : (
data?.stores?.map(store => (
<TableRow key={store.id}>
<TableCell>{store.name}</TableCell>
<TableCell>
<div className='flex gap-2'>
<Button
variant='ghost'
size='sm'
className='h-8 w-8 p-0'
asChild
>
<Link href={`/dashboard/stores/${store.id}`}>
<Edit className='h-4 w-4' />
</Link>
</Button>
<Button
variant='ghost'
size='sm'
className='h-8 w-8 p-0 text-destructive hover:text-destructive'
>
<Trash className='h-4 w-4' />
</Button>
</div>
</TableCell>
</TableRow>
) : (
data?.stores?.map(store => (
<TableRow key={store.id}>
<TableCell>{store.name}</TableCell>
<TableCell>
<div className='flex gap-2'>
<Button
variant='ghost'
size='sm'
className='h-8 w-8 p-0'
asChild
>
<Link href={`/dashboard/stores/${store.id}`}>
<Edit className='h-4 w-4' />
</Link>
</Button>
<Button
variant='ghost'
size='sm'
className='h-8 w-8 p-0 text-destructive hover:text-destructive'
>
<Trash className='h-4 w-4' />
</Button>
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
))
)}
</TableBody>
</Table>
</div>
);
}
80 changes: 39 additions & 41 deletions apps/admin/src/app/dashboard/users/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,51 +22,49 @@ export default function UsersPage() {
<h1 className='text-3xl font-bold'>Users</h1>
</div>

<div className='bg-white dark:bg-gray-900 shadow rounded-lg'>
<Table>
<TableHeader>
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Email</TableHead>
<TableHead>Joined</TableHead>
<TableHead>Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Email</TableHead>
<TableHead>Joined</TableHead>
<TableHead>Actions</TableHead>
<TableCell colSpan={6} className='text-center'>
Loading...
</TableCell>
</TableRow>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>
<TableCell colSpan={6} className='text-center'>
Loading...
) : (
data?.users?.map(user => (
<TableRow key={user.id}>
<TableCell>{user.name}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>
{new Date(user.createdAt).toLocaleDateString()}
</TableCell>
<TableCell>
<div className='flex gap-2'>
<Button variant='ghost' size='sm' className='h-8 w-8 p-0'>
<Edit className='h-4 w-4' />
</Button>
<Button
variant='ghost'
size='sm'
className='h-8 w-8 p-0 text-destructive hover:text-destructive'
>
<Trash className='h-4 w-4' />
</Button>
</div>
</TableCell>
</TableRow>
) : (
data?.users?.map(user => (
<TableRow key={user.id}>
<TableCell>{user.name}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>
{new Date(user.createdAt).toLocaleDateString()}
</TableCell>
<TableCell>
<div className='flex gap-2'>
<Button variant='ghost' size='sm' className='h-8 w-8 p-0'>
<Edit className='h-4 w-4' />
</Button>
<Button
variant='ghost'
size='sm'
className='h-8 w-8 p-0 text-destructive hover:text-destructive'
>
<Trash className='h-4 w-4' />
</Button>
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
))
)}
</TableBody>
</Table>
</div>
);
}
9 changes: 4 additions & 5 deletions apps/admin/src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,20 +23,20 @@
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
--radius: 0.5rem;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
--sidebar-ring: 217.2 91.2% 59.8%
}

.dark {
Expand Down Expand Up @@ -71,8 +71,7 @@
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
--sidebar-ring: 217.2 91.2% 59.8%}
}

@layer base {
Expand All @@ -82,4 +81,4 @@
body {
@apply bg-background text-foreground;
}
}
}
10 changes: 9 additions & 1 deletion apps/admin/src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Inter } from 'next/font/google';

import './globals.css';
import { Providers } from './providers';
import { ThemeProvider } from '@/components/theme-provider';

const inter = Inter({ subsets: ['latin'] });

Expand All @@ -19,7 +20,14 @@ export default function RootLayout({
return (
<html lang='en'>
<body className={inter.className}>
<Providers>{children}</Providers>
<ThemeProvider
attribute='class'
defaultTheme='dark'
enableSystem
disableTransitionOnChange
>
<Providers>{children}</Providers>
</ThemeProvider>
</body>
</html>
);
Expand Down
Loading

0 comments on commit 55f2bb9

Please sign in to comment.