Skip to content

Commit

Permalink
fix mobile spacing
Browse files Browse the repository at this point in the history
  • Loading branch information
StephDietz committed Mar 13, 2024
1 parent 25ccca4 commit a069ef6
Show file tree
Hide file tree
Showing 3 changed files with 782 additions and 781 deletions.
66 changes: 27 additions & 39 deletions app/dashboard/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,14 @@ import Image from 'next/image';
import Link from 'next/link';

export default function Layout({ children }: Readonly<{ children: React.ReactNode }>) {
const navLinks = [
{ title: 'Home', href: '/dashboard', badge: 0 },
{ title: 'Orders', href: '#', badge: 3 },
{ title: 'Products', href: '#', badge: 0 },
{ title: 'Customers', href: '#', badge: 0 },
{ title: 'Analytics', href: '#', badge: 0 }
];
const activeLink = '/dashboard';
return (
<div className="flex min-h-screen w-full">
<div className="hidden border-r dark:border-gray-700 lg:block w-80">
Expand All @@ -25,44 +33,24 @@ export default function Layout({ children }: Readonly<{ children: React.ReactNod
</div>
<div className="flex-1 overflow-auto py-2">
<nav className="grid items-start px-4 text-sm font-medium">
<Link
className="flex items-center gap-3 text-gray-900 bg-gray-100 rounded-lg px-3 py-2 transition-all hover:text-gray-900 hover:dark:text-gray-300"
href="#"
>
<HomeIcon className="h-4 w-4" />
Home
</Link>
<Link
className="hover:dark:text-gray-300 flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 transition-all hover:text-gray-900"
href="#"
>
<ShoppingCartIcon className="h-4 w-4" />
Orders
<Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
3
</Badge>
</Link>
<Link
className="hover:dark:text-gray-300 flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-gray-500 hover:text-gray-900"
href="#"
>
<PackageIcon className="h-4 w-4" />
Products
</Link>
<Link
className="hover:dark:text-gray-300 flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 transition-all hover:text-gray-900"
href="#"
>
<UsersIcon className="h-4 w-4" />
Customers
</Link>
<Link
className="hover:dark:text-gray-300 flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 transition-all hover:text-gray-900"
href="#"
>
<LineChartIcon className="h-4 w-4" />
Analytics
</Link>
{navLinks.map((link) => (
<Link
className={`${
activeLink === link.href
? 'bg-gray-100 text-gray-900 hover:text-gray-900 hover:dark:text-gray-300'
: ''
} hover:dark:text-gray-300 flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 transition-all hover:text-gray-900`}
href={link.href}
key={link.title}
>
<span>{link.title}</span>
{link.badge > 0 && (
<Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
{link.badge}
</Badge>
)}
</Link>
))}
</nav>
</div>
<div className="border-t dark:border-gray-700 p-4">
Expand All @@ -83,7 +71,7 @@ export default function Layout({ children }: Readonly<{ children: React.ReactNod
<span className="sr-only">Home</span>
</Link>
<h1 className="hidden md:blobk font-semibold text-lg">Dashboard</h1>
<div className="ml-auto flex items-center md:gap-4">
<div className="ml-auto flex items-center gap-4">
<form>
<div className="relative">
<Input
Expand Down
105 changes: 45 additions & 60 deletions app/dashboard/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,26 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
import Image from 'next/image';

export default function Page() {
const orders = [
{
id: 1,
name: 'Crispy Chicken Burger',
image: '/placeholder.svg',
orderId: '#123456'
},
{
id: 2,
name: 'Iced Latte',
image: '/placeholder.svg',
orderId: '#654321'
},
{
id: 3,
name: 'Pepperoni Pizza',
image: '/placeholder.svg',
orderId: '#987654'
}
];
return (
<div className="grid gap-4 md:gap-8">
<Card>
Expand All @@ -12,66 +32,31 @@ export default function Page() {
</CardHeader>
<CardContent>
<div className="flex flex-col gap-4">
<Card>
<CardContent className="flex flex-col md:flex-row md:items-center gap-4 py-4">
<Image
alt="Image"
className="rounded-md object-cover"
height="64"
src="/placeholder.svg"
style={{
aspectRatio: '64/64',
objectFit: 'cover'
}}
width="64"
/>
<div className="flex-1 grid gap-1">
<h3 className="font-semibold">Crispy Chicken Burger</h3>
<p className="text-sm text-gray-500">Order ID: #123456</p>
</div>
<Button size="sm">Track</Button>
</CardContent>
</Card>
<Card>
<CardContent className="flex flex-col md:flex-row md:items-center gap-4 py-4">
<Image
alt="Image"
className="rounded-md object-cover"
height="64"
src="/placeholder.svg"
style={{
aspectRatio: '64/64',
objectFit: 'cover'
}}
width="64"
/>
<div className="flex-1 grid gap-1">
<h3 className="font-semibold">Iced Latte</h3>
<p className="text-sm text-gray-500">Order ID: #654321</p>
</div>
<Button size="sm">Track</Button>
</CardContent>
</Card>
<Card>
<CardContent className="flex flex-col md:flex-row md:items-center gap-4 py-4">
<Image
alt="Image"
className="rounded-md object-cover"
height="64"
src="/placeholder.svg"
style={{
aspectRatio: '64/64',
objectFit: 'cover'
}}
width="64"
/>
<div className="flex-1 grid gap-1">
<h3 className="font-semibold">Pepperoni Pizza</h3>
<p className="text-sm text-gray-500">Order ID: #987654</p>
</div>
<Button size="sm">Track</Button>
</CardContent>
</Card>
{orders.map((order) => (
<Card key={order.id}>
<CardContent className="flex flex-col md:flex-row md:items-center justify-between gap-4 py-4">
<div className="flex items-center gap-4">
<Image
alt="Image"
className="rounded-md object-cover"
height="64"
src={order.image}
style={{
aspectRatio: '64/64',
objectFit: 'cover'
}}
width="64"
/>
<div className="flex-1 grid gap-1">
<h3 className="font-semibold">{order.name}</h3>
<p className="text-sm text-gray-500">Order ID: {order.orderId}</p>
</div>
</div>

<Button size="sm">Track</Button>
</CardContent>
</Card>
))}
</div>
</CardContent>
</Card>
Expand Down
Loading

0 comments on commit a069ef6

Please sign in to comment.