Skip to content

Commit

Permalink
Merge branch 'main' into add-basic-auth
Browse files Browse the repository at this point in the history
  • Loading branch information
@delbaoliveira
delbaoliveira committed Mar 13, 2024
2 parents 785d16d + 6766a8e commit 8e53e09
Show file tree
Hide file tree
Showing 22 changed files with 2,276 additions and 1,020 deletions.
40 changes: 20 additions & 20 deletions app/(public)/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,59 @@
import Link from "next/link"
import { MenuIcon } from "@/components/ui/icons"
import Link from 'next/link';
import { MenuIcon } from '@/components/ui/icons';

const links = [
{ href: "#", title: "Home" },
{ href: "#", title: "About" },
{ href: "#", title: "Services" },
{ href: "#", title: "Contact" },
]
{ href: '#', title: 'Home' },
{ href: '#', title: 'About' },
{ href: '#', title: 'Services' },
{ href: '#', title: 'Contact' },
];

export default function Layout({
children,
}: Readonly<{
children: React.ReactNode
children: React.ReactNode;
}>) {
return (
<div className="flex flex-col min-h-screen">
<div className="border-b border-gray-100">
<div className="container flex items-center justify-between px-4 md:px-6 py-4 mx-auto max-w-7xl">
<nav className="flex items-center space-x-4 text-sm">
<div className="flex min-h-screen flex-col">
<div className="border-b border-gray-100 dark:border-gray-700">
<div className="container mx-auto flex max-w-7xl items-center justify-end px-4 py-4 md:justify-between md:px-6">
<nav className="hidden items-center space-x-4 text-sm md:flex">
{links.map((link) => (
<Link
className="font-bold text-gray-900"
className=" text-gray-900 dark:text-white"
href={link.href}
key={link.title}
>
{link.title}
</Link>
))}
</nav>
<div className="hidden md:flex items-center space-x-4">
<div className="hidden items-center space-x-4 md:flex">
<Link
className="inline-flex h-8 items-center justify-center rounded-md border border-gray-200 bg-white px-4 text-sm font-medium transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50"
className="inline-flex h-8 items-center justify-center rounded-md border border-gray-200 bg-white px-4 text-sm font-medium transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:text-black"
href="/login"
>
Login
</Link>
</div>
<div className="md:hidden flex items-center space-x-4">
<div className="flex items-center space-x-4 md:hidden">
<Link
className="inline-flex h-8 items-center rounded-md border border-gray-200 bg-white px-3 text-sm font-medium"
className="inline-flex h-8 items-center rounded-md border border-gray-200 bg-white px-3 text-sm font-medium dark:text-black"
href="/login"
>
Login
</Link>
<button className="inline-flex rounded-md md:hidden" type="button">
<MenuIcon className="w-6 h-6" />
<MenuIcon className="h-6 w-6" />
<span className="sr-only">Toggle Menu</span>
</button>
</div>
</div>
</div>

<main className="flex-1 flex items-center justify-center">
<main className="flex flex-1 items-center justify-center">
{children}
</main>
</div>
)
);
}
6 changes: 3 additions & 3 deletions app/(public)/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Link from "next/link"
import Link from 'next/link';

export default function Page() {
return (
Expand All @@ -12,7 +12,7 @@ export default function Page() {
web apps.
</p>
</div>
<div className="flex flex-col gap-2 min-[400px]:flex-row justify-center">
<div className="flex flex-col justify-center gap-2 min-[400px]:flex-row">
<Link
className="inline-flex h-10 items-center justify-center rounded-md border border-gray-200 bg-white px-8 text-sm font-medium shadow-sm transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50"
href="/signup"
Expand All @@ -21,5 +21,5 @@ export default function Page() {
</Link>
</div>
</div>
)
);
}
100 changes: 44 additions & 56 deletions app/dashboard/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,63 @@
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
HomeIcon,
LineChartIcon,
LogOutIcon,
PackageIcon,
ShoppingCartIcon,
UsersIcon,
} from "@/components/ui/icons"
import { Input } from "@/components/ui/input"
import Image from "next/image"
import Link from "next/link"
} from '@/components/ui/icons';
import { Input } from '@/components/ui/input';
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 bg-gray-100/40 lg:block w-80">
<div className="hidden w-80 border-r lg:block dark:border-gray-700">
<div className="flex h-full flex-col gap-2">
<div className="flex h-14 items-center border-b px-4">
<div className="flex h-14 items-center border-b px-4 dark:border-gray-700">
<Link className="flex items-center gap-2 font-semibold" href="#">
<PackageIcon className="h-6 w-6" />
<span className="">Acme Inc</span>
</Link>
</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"
href="#"
>
<HomeIcon className="h-4 w-4" />
Home
</Link>
<Link
className="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="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="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="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'
: ''
} flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 transition-all hover:text-gray-900 hover:dark:text-gray-300`}
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 p-4">
<div className="border-t p-4 dark:border-gray-700">
<Link
className="font-medium flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 text-sm transition-all hover:text-gray-900"
className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-gray-500 transition-all hover:text-gray-900 hover:dark:text-gray-300"
href="#"
>
<LogOutIcon className="h-4 w-4" />
Expand All @@ -78,21 +66,21 @@ export default function Layout({
</div>
</div>
</div>
<div className="flex flex-col w-full">
<header className="flex h-14 items-center gap-4 border-b bg-gray-100/40 px-4">
<div className="flex w-full flex-col">
<header className="flex h-14 items-center border-b px-4 md:gap-4 dark:border-gray-700">
<Link
className="lg:hidden flex items-center rounded-md bg-gray-100 px-2 py-2"
className="flex items-center rounded-md bg-gray-100 px-2 py-2 lg:hidden"
href="#"
>
<PackageIcon className="h-6 w-6" />
<span className="sr-only">Home</span>
</Link>
<h1 className="font-semibold text-lg">Dashboard</h1>
<h1 className="md:blobk hidden text-lg font-semibold">Dashboard</h1>
<div className="ml-auto flex items-center gap-4">
<form>
<div className="relative">
<Input
className="w-[200px] bg-gray-100/60"
className="bg-gray-100/60 md:w-[200px]"
placeholder="Search orders..."
type="search"
/>
Expand All @@ -105,8 +93,8 @@ export default function Layout({
height="32"
src="/placeholder.svg"
style={{
aspectRatio: "32/32",
objectFit: "cover",
aspectRatio: '32/32',
objectFit: 'cover',
}}
width="32"
/>
Expand All @@ -117,5 +105,5 @@ export default function Layout({
<main className="flex-1 p-4 md:p-6">{children}</main>
</div>
</div>
)
);
}
115 changes: 51 additions & 64 deletions app/dashboard/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,34 @@
import { Button } from "@/components/ui/button"
import { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import Image from "next/image"
} from '@/components/ui/card';
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 @@ -20,69 +40,36 @@ export default function Page() {
</CardHeader>
<CardContent>
<div className="flex flex-col gap-4">
<Card>
<CardContent className="flex 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 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 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 justify-between gap-4 py-4 md:flex-row md:items-center">
<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="grid flex-1 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>
</div>
)
);
}
Loading

0 comments on commit 8e53e09

Please sign in to comment.