From 86f2475aad71602696f2828638c3c6ee033418dd Mon Sep 17 00:00:00 2001 From: Henrik Larsson Date: Fri, 11 Aug 2023 11:54:50 +0200 Subject: [PATCH] Search fixes --- components/cart/open-cart.tsx | 2 +- components/layout/header/header.tsx | 4 +- .../header/mobile-menu/open-mobile-menu.tsx | 4 +- .../layout/header/search/open-search.tsx | 2 +- .../header/user-menu/open-user-menu.tsx | 2 +- components/price.tsx | 2 +- components/product/gallery.tsx | 2 +- components/product/grid.tsx | 4 +- components/product/price.tsx | 22 ------- components/product/product-view.tsx | 41 ++++++++----- components/search/search.tsx | 22 +++++-- components/ui/accordion.tsx | 56 ++++++++++++++++++ components/ui/dropdown-menu.tsx | 4 +- .../ui/locale-switcher/locale-switcher.tsx | 2 +- components/ui/product-card/product-card.tsx | 2 +- package.json | 1 + pnpm-lock.yaml | 59 +++++++++++++++++++ 17 files changed, 172 insertions(+), 59 deletions(-) delete mode 100644 components/product/price.tsx create mode 100644 components/ui/accordion.tsx diff --git a/components/cart/open-cart.tsx b/components/cart/open-cart.tsx index 3e1d4822a..3d7e98e3b 100644 --- a/components/cart/open-cart.tsx +++ b/components/cart/open-cart.tsx @@ -9,7 +9,7 @@ export default function OpenCart({ quantity?: number; }) { return ( -
+
-
+
}> @@ -47,7 +47,7 @@ export default async function Header({ locale }: HeaderProps) { {mainMenu.map((item: { title: string; slug: string }, i: number) => { return (
  • - + {item.title}
    • diff --git a/components/layout/header/mobile-menu/open-mobile-menu.tsx b/components/layout/header/mobile-menu/open-mobile-menu.tsx index 0a7087504..ebfd3a966 100644 --- a/components/layout/header/mobile-menu/open-mobile-menu.tsx +++ b/components/layout/header/mobile-menu/open-mobile-menu.tsx @@ -3,10 +3,10 @@ import clsx from 'clsx'; export default function OpenMobileMenu({ className }: { className?: string }) { return ( -
    +
    diff --git a/components/layout/header/search/open-search.tsx b/components/layout/header/search/open-search.tsx index 3129e5952..8e0193090 100644 --- a/components/layout/header/search/open-search.tsx +++ b/components/layout/header/search/open-search.tsx @@ -3,7 +3,7 @@ import clsx from 'clsx'; export default function OpenSearch({ className }: { className?: string }) { return ( -
    +
    diff --git a/components/layout/header/user-menu/open-user-menu.tsx b/components/layout/header/user-menu/open-user-menu.tsx index 9e4a911e9..2b88e6b37 100644 --- a/components/layout/header/user-menu/open-user-menu.tsx +++ b/components/layout/header/user-menu/open-user-menu.tsx @@ -3,7 +3,7 @@ import clsx from 'clsx'; export default function OpenUserMenu({ className }: { className?: string }) { return ( -
    +
    -
    +
    {images[imageIndex] && ( +
    {images.map( ( image: { @@ -19,7 +19,7 @@ export function Grid({ ) => { return ( ) => ( -

    - - {`${new Intl.NumberFormat(undefined, { - style: 'currency', - currency: currencyCode, - currencyDisplay: 'narrowSymbol' - }).format(parseFloat(amount))} ${currencyCode}`} - -

    -); - -export default Price; diff --git a/components/product/product-view.tsx b/components/product/product-view.tsx index ff4bf444e..5336bd646 100644 --- a/components/product/product-view.tsx +++ b/components/product/product-view.tsx @@ -1,14 +1,20 @@ 'use client'; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger +} from '@/components/ui/accordion'; import { Product } from '@/lib/storm/product'; import { Image } from '@/lib/storm/types'; import Text from 'components/ui/text/text'; import { cn } from 'lib/utils'; import { useTranslations } from 'next-intl'; import { Suspense } from 'react'; +import Price from '../price'; import { Gallery } from './gallery'; import { Grid } from './grid'; -import Price from './price'; interface ProductViewProps { product: Product; @@ -43,21 +49,10 @@ export default function ProductView({ product, relatedProducts }: ProductViewPro width: image.width }))} /> - - {/* {images.map((image: Image, index: number) => ( -
    - -
    - ))} */}
    -
    +
    {name} - - {description} - + {description && ( + + + {t('description')} + + + {description} + + + + + )}
    diff --git a/components/search/search.tsx b/components/search/search.tsx index 8236caf96..1ff779908 100644 --- a/components/search/search.tsx +++ b/components/search/search.tsx @@ -1,4 +1,6 @@ import algoliasearch from 'algoliasearch/lite'; +// import { useLocale } from 'next-intl'; +import Text from '@/components/ui/text'; import { Highlight, Hits, InstantSearch, SearchBox } from 'react-instantsearch'; const searchClient = algoliasearch( @@ -7,6 +9,7 @@ const searchClient = algoliasearch( ); export default function Search() { + // const locale = useLocale(); // Hit. function Hit(props: any) { return ( @@ -14,10 +17,13 @@ export default function Search() {
    -

    + + Brand + +

    -

    {props.hit.price} SEK

    +

    {props.hit.price} SEK

     @@ -33,16 +39,20 @@ export default function Search() { root: 'mt-4', form: 'relative', input: - 'block w-full appearance-none rounded-none h-11 pl-9 pr-3 py-2 bg-white border border-ui-border', + 'block w-full outline-offset-0 appearance-none rounded-none h-11 px-11 pr-3 py-2 bg-white border border-ui-border', submit: 'absolute flex items-center justify-center top-0 left-0 bottom-0 w-11 h-11', - submitIcon: 'w-4 h-4' + submitIcon: 'w-4 h-4', + reset: 'absolute items-center justify-center top-0 right-0 bottom-0 w-11 h-11', + resetIcon: 'w-3 h-3 mx-auto bg-app' }} /> + {/* */} + diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx new file mode 100644 index 000000000..5de81d65d --- /dev/null +++ b/components/ui/accordion.tsx @@ -0,0 +1,56 @@ +'use client'; + +import { ChevronDownIcon } from '@heroicons/react/24/outline'; +import * as AccordionPrimitive from '@radix-ui/react-accordion'; +import * as React from 'react'; + +import { cn } from '@/lib/utils'; + +const Accordion = AccordionPrimitive.Root; + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AccordionItem.displayName = 'AccordionItem'; + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180', + className + )} + {...props} + > + {children} + + + +)); +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName; + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
    {children}
    +     +)); +AccordionContent.displayName = AccordionPrimitive.Content.displayName; + +export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }; diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx index ee6de438d..3efabd256 100644 --- a/components/ui/dropdown-menu.tsx +++ b/components/ui/dropdown-menu.tsx @@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef< setIsOpen(!isOpen)}> diff --git a/components/ui/product-card/product-card.tsx b/components/ui/product-card/product-card.tsx index 1d76f90be..7053188d2 100644 --- a/components/ui/product-card/product-card.tsx +++ b/components/ui/product-card/product-card.tsx @@ -2,7 +2,7 @@ import SanityImage from '@/components/ui/sanity-image/sanity-image'; import type { Product } from '@/lib/storm/product'; -import Price from 'components/product/price'; +import Price from 'components/price'; import Text from 'components/ui/text'; import { cn } from 'lib/utils'; import Link from 'next/link'; diff --git a/package.json b/package.json index faf75b69f..21c8a53a1 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "dependencies": { "@heroicons/react": "^2.0.18", "@portabletext/react": "^3.0.0", + "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-dropdown-menu": "^2.0.4", "@radix-ui/react-navigation-menu": "^1.1.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3abda8ddd..fc4b447bf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,7 @@ specifiers: '@next/bundle-analyzer': ^13.4.13 '@playwright/test': ^1.34.1 '@portabletext/react': ^3.0.0 + '@radix-ui/react-accordion': ^1.1.2 '@radix-ui/react-dialog': ^1.0.4 '@radix-ui/react-dropdown-menu': ^2.0.4 '@radix-ui/react-navigation-menu': ^1.1.2 @@ -56,6 +57,7 @@ specifiers: dependencies: '@heroicons/react': 2.0.18_react@18.2.0 '@portabletext/react': 3.0.4_react@18.2.0 + '@radix-ui/react-accordion': 1.1.2_ml6diaeoljuxdq7psn5bilsrme '@radix-ui/react-dialog': 1.0.4_ml6diaeoljuxdq7psn5bilsrme '@radix-ui/react-dropdown-menu': 2.0.5_ml6diaeoljuxdq7psn5bilsrme '@radix-ui/react-navigation-menu': 1.1.3_ml6diaeoljuxdq7psn5bilsrme @@ -1181,6 +1183,35 @@ packages: '@babel/runtime': 7.22.10 dev: false + /@radix-ui/react-accordion/1.1.2_ml6diaeoljuxdq7psn5bilsrme: + resolution: {integrity: sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.10 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-collapsible': 1.0.3_ml6diaeoljuxdq7psn5bilsrme + '@radix-ui/react-collection': 1.0.3_ml6diaeoljuxdq7psn5bilsrme + '@radix-ui/react-compose-refs': 1.0.1_6kgymidexis2l23kiss4by6rqm + '@radix-ui/react-context': 1.0.1_6kgymidexis2l23kiss4by6rqm + '@radix-ui/react-direction': 1.0.1_6kgymidexis2l23kiss4by6rqm + '@radix-ui/react-id': 1.0.1_6kgymidexis2l23kiss4by6rqm + '@radix-ui/react-primitive': 1.0.3_ml6diaeoljuxdq7psn5bilsrme + '@radix-ui/react-use-controllable-state': 1.0.1_6kgymidexis2l23kiss4by6rqm + '@types/react': 18.2.19 + '@types/react-dom': 18.2.7 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-arrow/1.0.3_ml6diaeoljuxdq7psn5bilsrme: resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==} peerDependencies: @@ -1202,6 +1233,34 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-collapsible/1.0.3_ml6diaeoljuxdq7psn5bilsrme: + resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.10 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1_6kgymidexis2l23kiss4by6rqm + '@radix-ui/react-context': 1.0.1_6kgymidexis2l23kiss4by6rqm + '@radix-ui/react-id': 1.0.1_6kgymidexis2l23kiss4by6rqm + '@radix-ui/react-presence': 1.0.1_ml6diaeoljuxdq7psn5bilsrme + '@radix-ui/react-primitive': 1.0.3_ml6diaeoljuxdq7psn5bilsrme + '@radix-ui/react-use-controllable-state': 1.0.1_6kgymidexis2l23kiss4by6rqm + '@radix-ui/react-use-layout-effect': 1.0.1_6kgymidexis2l23kiss4by6rqm + '@types/react': 18.2.19 + '@types/react-dom': 18.2.7 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-collection/1.0.3_ml6diaeoljuxdq7psn5bilsrme: resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==} peerDependencies: