+
{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: