Adding Collapse

components/product/ProductView/ProductView.module.css

@@ -94,23 +94,3 @@
     @apply right-0 top-0 text-black bg-white w-14 h-14;
   }
 }
-
-.tab {
-  @apply border-b border-accent-2 py-4 px-2 flex flex-col;
-}
-
-.tab .header {
-  @apply flex flex-row items-center;
-}
-
-.tab .header .label {
-  @apply text-sm font-medium;
-}
-
-.tab .icon {
-  @apply mr-3 text-accent-6 transform;
-}
-
-.tab .icon.open {
-  transform: rotate(90deg);
-}

components/product/ProductView/ProductView.tsx

@@ -10,7 +10,7 @@ import usePrice from '@framework/product/use-price'
 import { useAddItem } from '@framework/cart'
 import { getVariant, SelectedOptions } from '../helpers'
 import WishlistButton from '@components/wishlist/WishlistButton'
-import { ChevronDown, ChevronRight } from '@components/icons'
+import Collapse from '@components/ui/Collapse'
 
 interface Props {
   children?: any
@@ -27,7 +27,6 @@ const ProductView: FC<Props> = ({ product }) => {
   })
   const { openSidebar } = useUI()
   const [loading, setLoading] = useState(false)
-  const [tabId, setTabId] = useState('')
   const [choices, setChoices] = useState<SelectedOptions>({})
 
   useEffect(() => {
@@ -161,21 +160,14 @@ const ProductView: FC<Props> = ({ product }) => {
           </div>
 
           <div className="mt-6">
-            <ul>
-              <li className={s.tab}>
-                <div className={s.header}>
-                  <ChevronRight
-                    className={cn(s.icon, { [s.open]: tabId })}
-                    onClick={() => tabId('1')}
-                  />
-                  <span className={s.label}>Details</span>
-                </div>
-                <div className={s.content}>
-                  This is a limited edition production run. Printing starts when
-                  the drop ends.
-                </div>
-              </li>
-            </ul>
+            <Collapse title="Details">
+              This is a limited edition production run. Printing starts when the
+              drop ends.
+            </Collapse>
+            <Collapse title="Care">
+              This is a limited edition production run. Printing starts when the
+              drop ends.
+            </Collapse>
           </div>
         </div>
       </div>

components/product/Swatch/Swatch.module.css

@@ -35,7 +35,7 @@
 }
 
 .active {
-  @apply border-accents-9 border-2;
+  @apply border-accent-9 border-2;
   padding-right: 1px;
   padding-left: 1px;
 }
@@ -46,7 +46,7 @@
 }
 
 .active.textLabel {
-  @apply border-accents-9 border-2;
+  @apply border-accent-9 border-2;
   padding-right: calc(1rem - 1px);
   padding-left: calc(1rem - 1px);
 }