diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx new file mode 100644 index 000000000..7faf79a98 --- /dev/null +++ b/app/checkout/page.tsx @@ -0,0 +1,111 @@ +import { CheckoutCart } from '@/components/checkout/checkout-cart'; +import { LoadingCart } from '@/components/checkout/loading-cart'; +import { Button } from '@/components/ui/button'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue +} from '@/components/ui/select'; +import { Suspense } from 'react'; + +export default function CheckoutPage() { + return ( +
+

Checkout

+
+
+ + + Contact + + +
+ + +
+ + + + + + Shipping Address + + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ + + + +
+ +
+ + + Order Summary + + + }> + + + + +
+
+
+ ); +} diff --git a/app/globals.css b/app/globals.css index 78b24be67..72a39e84b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -30,3 +30,9 @@ input, button { @apply focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-neutral-600 dark:focus-visible:ring-offset-neutral-900; } + +@layer base { + :root { + --radius: 0.5rem; + } +} diff --git a/components.json b/components.json new file mode 100644 index 000000000..f1b13e421 --- /dev/null +++ b/components.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.js", + "css": "app/globals.css", + "baseColor": "neutral", + "cssVariables": false, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui" + } +} diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx index 6d08eba89..5a1a74117 100644 --- a/components/cart/modal.tsx +++ b/components/cart/modal.tsx @@ -9,6 +9,7 @@ import { DEFAULT_OPTION } from 'lib/constants'; import { createUrl } from 'lib/utils'; import Image from 'next/image'; import Link from 'next/link'; +import { usePathname } from 'next/navigation'; import { Fragment, useEffect, useRef, useState } from 'react'; import { useFormStatus } from 'react-dom'; import { createCartAndSetCookie, redirectToCheckout } from './actions'; @@ -27,6 +28,7 @@ export default function CartModal() { const quantityRef = useRef(cart?.totalQuantity); const openCart = () => setIsOpen(true); const closeCart = () => setIsOpen(false); + const pathname = usePathname(); useEffect(() => { if (!cart) { @@ -47,6 +49,10 @@ export default function CartModal() { } }, [isOpen, cart?.totalQuantity, quantityRef]); + useEffect(() => { + if (pathname === '/checkout') closeCart(); + }, [pathname]); + return ( <>