crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-08 18:57:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

add: Search bar

Browse Source
This commit is contained in:
Minjee Son 2024-09-11 23:13:40 +01:00
parent 090a0a041a
commit 9c3af08c8f
3 changed files with 155 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/globals.css
View File

@ -22,5 +22,5 @@ body {
a,
input,
button {
@apply focus-visible:outline-none 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;
outline: none;
}

150
app/page.tsx
View File

@ -4,6 +4,7 @@ import { Navbar } from 'components/layout/navbar';
import Search from 'components/layout/navbar/search';
import { PriceBox } from 'components/price-box';
import { getCollectionProducts } from 'lib/shopify';
import type { Product } from 'lib/shopify/types';
import Image from 'next/image';
//Todo: change to proper metadata
@ -45,15 +46,154 @@ export default async function HomePage() {
</div>
</div>
</section>
<section className="flex">
{/* needs to check background-color */}
<section className="flex justify-between gap-10 bg-black px-[30px]">
<Search />
<div className="flex">
Filter by
<button>Size</button>
<button>Strength</button>
<div className="flex w-full items-center justify-end gap-[10px] text-lightText">
<span className="text-xs opacity-50">Filter by</span>
<button type="button" className="text-[15px]">
Size
</button>
<button type="button" className="text-[15px]">
Strength
</button>
</div>
</section>
<Footer />
</>
);
}
//temp: for ProductGridItems test
const mockProducts: Product[] = [
{
id: 'prod_001',
handle: 'product-1',
availableForSale: true,
title: 'Product 1',
description: 'This is the description for Product 1',
descriptionHtml: '<p>This is the <strong>HTML</strong> description for Product 1</p>',
options: [
{
id: 'option_001',
name: 'Size',
values: ['S', 'M', 'L']
}
],
priceRange: {
maxVariantPrice: {
amount: '100.00',
currencyCode: 'USD'
},
minVariantPrice: {
amount: '80.00',
currencyCode: 'USD'
}
},
featuredImage: {
url: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',
altText: 'Product 1 Featured Image',
width: 500,
height: 500
},
seo: {
title: 'Product 1 SEO Title',
description: 'This is the SEO description for Product 1'
},
tags: ['tag1', 'tag2'],
updatedAt: new Date().toISOString(),
variants: [
{
id: 'variant_001',
title: 'Variant 1',
availableForSale: true,
selectedOptions: [
{
name: 'Size',
value: 'M'
}
],
price: {
amount: '90.00',
currencyCode: 'USD'
}
}
],
images: [
{
url: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',
altText: 'Product 1 Image 1',
width: 500,
height: 500
},
{
url: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',
altText: 'Product 1 Image 2',
width: 400,
height: 400
}
]
},
{
id: 'prod_002',
handle: 'product-2',
availableForSale: false,
title: 'Product 2',
description: 'This is the description for Product 2',
descriptionHtml: '<p>This is the <strong>HTML</strong> description for Product 2</p>',
options: [
{
id: 'option_002',
name: 'Color',
values: ['Red', 'Blue', 'Green']
}
],
priceRange: {
maxVariantPrice: {
amount: '120.00',
currencyCode: 'USD'
},
minVariantPrice: {
amount: '100.00',
currencyCode: 'USD'
}
},
featuredImage: {
url: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',
altText: 'Product 2 Featured Image',
width: 500,
height: 500
},
seo: {
title: 'Product 2 SEO Title',
description: 'This is the SEO description for Product 2'
},
tags: ['tag3', 'tag4'],
updatedAt: new Date().toISOString(),
variants: [
{
id: 'variant_002',
title: 'Variant 2',
availableForSale: false,
selectedOptions: [
{
name: 'Color',
value: 'Red'
}
],
price: {
amount: '110.00',
currencyCode: 'USD'
}
}
],
images: [
{
url: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',
altText: 'Product 2 Image 1',
width: 500,
height: 500
}
]
}
];

29
components/layout/navbar/search.tsx
View File

@ -8,33 +8,22 @@ export default function Search() {
const searchParams = useSearchParams();
return (
<Form action="/search" className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
<Form
action="/search"
className="w-max-[550px] flex w-full gap-[10px] px-5 py-4 lg:w-80 xl:w-full"
>
<div className="flex h-full items-center text-lightText">
<MagnifyingGlassIcon className="h-4 stroke-2" />
</div>
<input
key={searchParams?.get('q')}
type="text"
name="q"
placeholder="Search for products..."
placeholder="eg. Finos Rerserva"
autoComplete="off"
defaultValue={searchParams?.get('q') || ''}
className="text-md w-full rounded-lg border bg-white px-4 py-2 text-black placeholder:text-neutral-500 md:text-sm dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
className="w-full bg-inherit text-base text-lightText placeholder:text-lightText/50 md:text-sm"
/>
<div className="absolute right-0 top-0 mr-3 flex h-full items-center">
<MagnifyingGlassIcon className="h-4" />
</div>
</Form>
);
}
export function SearchSkeleton() {
return (
<form className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
<input
placeholder="Search for products..."
className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
/>
<div className="absolute right-0 top-0 mr-3 flex h-full items-center">
<MagnifyingGlassIcon className="h-4" />
</div>
</form>
);
}