-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* mv image carousel * base carousel and story * wrapper * wiring * storybook first pass * story * mv sort * mv sort * pagination * ssr compat * revert * card * card * mv and story * sort story * ts version bump for next build * lint fix * fix link
- Loading branch information
Showing
36 changed files
with
4,575 additions
and
4,962 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { ProductImage } from "utils/groqTypes/ProductList"; | ||
| import * as React from "react"; | ||
| import { Image } from "components/Image"; | ||
| import { ImageCarousel as BaseImageCarousel } from "shared-ui"; | ||
|
|
||
| export type ImageCarouselProps = { | ||
| productImages: ProductImage[]; | ||
| }; | ||
|
|
||
| export const ImageCarousel = ({ productImages }: ImageCarouselProps) => { | ||
| return ( | ||
| <BaseImageCarousel> | ||
| {productImages?.map((image) => ( | ||
| <Image | ||
| className="rounded-2xl aspect-square w-full" | ||
| layout="fill" | ||
| key={image?.name} | ||
| src={image ?? ""} | ||
| alt={image?.name ?? ""} | ||
| /> | ||
| ))} | ||
| </BaseImageCarousel> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,76 +1,10 @@ | ||
| import * as React from "react"; | ||
| import { Pill, Select } from "shared-ui"; | ||
| import { PAGE_QUERY_PARAM, SORT_OPTIONS, SORT_OPTIONS_ARRAY, SORT_QUERY_PARAM, SortType } from "utils/sorting"; | ||
| import { useRouterQueryParams } from "utils/useRouterQueryParams"; | ||
| import { ProductSort as BaseProductSort, ProductSortProps as BaseProps } from "shared-ui"; | ||
|
|
||
| type ProductSortProps = { | ||
| as?: "select" | "pills"; | ||
| showTitle?: boolean; | ||
| title?: string; | ||
| selectClassName?: string; | ||
| }; | ||
| type ProductSortProps = Pick<BaseProps, "as" | "showTitle" | "title" | "selectClassName">; | ||
|
|
||
| export const ProductSort: React.FC<ProductSortProps> = ({ | ||
| as = "pills", | ||
| showTitle = false, | ||
| title = "Sort by", | ||
| selectClassName = "", | ||
| }) => { | ||
| export const ProductSort: React.FC<ProductSortProps> = (props) => { | ||
| const { replace, clear, query } = useRouterQueryParams(); | ||
| const defaultSortValue = SORT_OPTIONS_ARRAY.find(({ type }) => type === SortType.Default)?.value; | ||
|
|
||
| const handleChange = (value: string) => { | ||
| switch (SORT_OPTIONS[value].type) { | ||
| case SortType.Natural: { | ||
| replace({ [SORT_QUERY_PARAM]: value, [PAGE_QUERY_PARAM]: "1" }); | ||
| break; | ||
| } | ||
| case SortType.Default: | ||
| default: | ||
| clear(SORT_QUERY_PARAM); | ||
| } | ||
| }; | ||
|
|
||
| // Display as SELECT element. | ||
| if (as === "select") { | ||
| const elements = SORT_OPTIONS_ARRAY.map((item) => { | ||
| return { | ||
| title: item.label, | ||
| value: item.value, | ||
| }; | ||
| }); | ||
|
|
||
| const selectedItem = elements.find((item) => item.value === (query[SORT_QUERY_PARAM] || defaultSortValue)); | ||
|
|
||
| return ( | ||
| <div> | ||
| {showTitle && <h4 className="text-h4 text-primary mb-1">{title}</h4>} | ||
| <Select | ||
| label="" | ||
| placeholder={title} | ||
| selectedItem={selectedItem} | ||
| options={elements} | ||
| className={selectClassName} | ||
| onChange={(item) => handleChange(item?.value ?? "")} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-4"> | ||
| {showTitle && <h4 className="text-h4 text-primary">{title}</h4>} | ||
| <div className="flex flex-wrap gap-2"> | ||
| {SORT_OPTIONS_ARRAY.map(({ value, label }) => ( | ||
| <Pill | ||
| key={value} | ||
| onClick={() => handleChange(value)} | ||
| selected={value === (query[SORT_QUERY_PARAM] || defaultSortValue)} | ||
| > | ||
| {label} | ||
| </Pill> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| return <BaseProductSort {...props} onClear={clear} onReplace={replace} query={query} />; | ||
| }; |
Oops, something went wrong.
e2730b0There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
nextjs-sanity-fe – ./
nextjs-sanity-fe-git-main-formidable-labs.vercel.app
nextjs-sanity-fe.vercel.app
nextjs-sanity-fe-formidable-labs.vercel.app