15 | {`${new Intl.NumberFormat(undefined, { 16 | style: 'currency', 17 | currency: currencyCode, 18 | currencyDisplay: 'narrowSymbol' 19 | }).format(amount)}`} 20 | {`${currencyCode}`} 21 |
22 | ); 23 | 24 | export default Price; 25 | -------------------------------------------------------------------------------- /components/logo-square.tsx: -------------------------------------------------------------------------------- 1 | import clsx from 'clsx'; 2 | import LogoIcon from './icons/logo'; 3 | 4 | export default function LogoSquare({ size }: { size?: 'sm' | undefined }) { 5 | return ( 6 |8 | There was an issue with our storefront. This could be a temporary issue, please try your 9 | action again. 10 |
11 | 17 |{title}
27 |Thank you for your purchase! See You Again
24 |43 | {`This document was last updated on ${new Intl.DateTimeFormat( 44 | undefined, 45 | { 46 | year: "numeric", 47 | month: "long", 48 | day: "numeric", 49 | }, 50 | ).format(new Date())}.`} 51 |
52 | > 53 | ); 54 | } 55 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | @plugin "@tailwindcss/container-queries"; 4 | @plugin "@tailwindcss/typography"; 5 | 6 | @layer base { 7 | *, 8 | ::after, 9 | ::before, 10 | ::backdrop, 11 | ::file-selector-button { 12 | border-color: var(--color-gray-200, currentColor); 13 | } 14 | } 15 | 16 | @media (prefers-color-scheme: dark) { 17 | html { 18 | color-scheme: dark; 19 | } 20 | } 21 | 22 | @supports (font: -apple-system-body) and (-webkit-appearance: none) { 23 | img[loading="lazy"] { 24 | clip-path: inset(0.6px); 25 | } 26 | } 27 | @theme{ 28 | --breakpoint-2xl:106rem; 29 | } 30 | a, 31 | input, 32 | button { 33 | @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; 34 | } 35 | 36 | /* --------- Custom Css---------- */ 37 | *::-webkit-scrollbar-track { 38 | -webkit-box-shadow: none; 39 | @apply bg-white dark:bg-black/100; 40 | } 41 | 42 | *::-webkit-scrollbar { 43 | @apply my-5 w-[6px] bg-gray-300; 44 | } 45 | 46 | *::-webkit-scrollbar-thumb { 47 | @apply my-5 rounded-full bg-gray-500 dark:bg-gray-500; 48 | } 49 | 50 | .hiddenScrollBar::-webkit-scrollbar { 51 | @apply my-5 h-[6px] cursor-pointer bg-gray-300; 52 | } 53 | .animate-carousel { 54 | animation: marquee 30s linear infinite; 55 | } 56 | @keyframes marquee { 57 | 0% { 58 | transform: translateX(0%); 59 | } 60 | 100% { 61 | transform: translateX(-100%); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /components/icons/shopping-cart.tsx: -------------------------------------------------------------------------------- 1 | import clsx from 'clsx'; 2 | 3 | export default function ShoppingCartIcon(props: React.ComponentProps<'svg'>) { 4 | return ( 5 | 19 | ); 20 | } 21 | 22 | export function BasketCartIcon(props: React.ComponentProps<'svg'>) { 23 | return ( 24 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /components/grid/tile.tsx: -------------------------------------------------------------------------------- 1 | import clsx from 'clsx'; 2 | import Image from 'next/image'; 3 | import Label from '../label'; 4 | import Thumbnail from '~components/product/Thumbnail'; 5 | 6 | export function GridTileImage({ 7 | isInteractive = true, 8 | active, 9 | label, 10 | ...props 11 | }: { 12 | isInteractive?: boolean; 13 | active?: boolean; 14 | label?: { 15 | title: string; 16 | amount?: number; 17 | currencyCode?: string; 18 | position?: 'bottom' | 'center'; 19 | }; 20 | } & React.ComponentProps36 | {products?.length === 0 37 | ? "There are no products that match " 38 | : `Showing ${products?.length} ${resultsText} for `} 39 | "{searchValue}" 40 |
41 | ) : null} 42 | {products?.length > 0 ? ( 43 | <> 44 |36 | All rights reserved Dev Vercel Shop. 37 |
38 |No products found in this collection
46 | ) : ( 47 | <> 48 |54 | If you forgot your password, recover it by entering your email 55 | address. 56 |
57 |30 | If you are new to our store, we glad to have you as member. 31 |
32 |If you have an account, sign in with your email address.
74 || Contact | 30 |34 | {shippingAddress?.telephone} 35 | | 36 |37 | 41 | Change 42 | 43 | | 44 |
|---|---|---|
| Ship to | 47 |51 | {`${shippingAddress?.firstname} ${shippingAddress?.lastname} ${shippingAddress?.company} ${shippingAddress?.street[0]} ${shippingAddress?.street?.[1]} ${shippingAddress?.city} ${shippingAddress?.region?.label} ${shippingAddress?.country?.label} ${shippingAddress?.postcode}`} 52 | | 53 |54 | 58 | Change 59 | 60 | | 61 |
{item.product.sku}
69 | ) : null} 70 |{isObject(txtPrice) && txtPrice.name[0]?.toUpperCase() + txtPrice.name.slice(1)}
92 |Subtotal
101 |Shipping
109 | {isObject(cart?.shipping_address?.selected_shipping_method) ? ( 110 |Calculated at next step
117 | )} 118 |Total
121 || Contact | 29 |33 | {shippingAddress?.telephone} 34 | | 35 |36 | 40 | Change 41 | 42 | | 43 |
|---|---|---|
| Ship to | 46 |50 | {`${shippingAddress?.firstname} ${shippingAddress?.lastname} ${shippingAddress?.company} ${shippingAddress?.street[0]} ${shippingAddress?.street?.[1]} ${shippingAddress?.city} ${shippingAddress?.region?.label} ${shippingAddress?.country?.label} ${shippingAddress?.postcode}`} 51 | | 52 |53 | 57 | Change 58 | 59 | | 60 |
| Method | 63 |
67 | {`${shippingAddress?.selected_shipping_method?.carrier_title} -`}
68 | |
81 | 82 | 86 | Change 87 | 88 | | 89 |
144 | All transactions are secure and encrypted. 145 |
146 |149 | This store can’t accept payments right now. 150 |
151 |63 | Manage Cart, Orders 64 | 65 | 🎉 66 | 67 |
68 |104 | Manage Cart, Orders 105 | 106 | 🎉 107 | 108 |
109 |Hide order summary
29 | ) : ( 30 |Show order summary
31 | )} 32 |{item.product.sku}
95 | ) : null} 96 |{isObject(txtPrice) && txtPrice.name[0]?.toUpperCase() + txtPrice.name.slice(1)}
118 |Subtotal
127 |Shipping
135 | {isObject(cartItem?.shipping_address?.selected_shipping_method) ? ( 136 |Calculated at next step
143 | )} 144 |Total
147 |