From 280c266c89d3ffa2bea0516ca7bbc20ff13ca1dd Mon Sep 17 00:00:00 2001
From: goncy <gonzalo.pozzo4@gmail.com>
Date: Fri, 5 May 2023 13:16:42 -0300
Subject: [PATCH] Use layouts

---
 .eslintrc.cjs                                 |   2 +-
 package.json                                  |   2 +
 pnpm-lock.yaml                                |  72 +++++++
 src/app/layout.tsx                            |  10 +-
 src/app/mocks/[mock]/page.tsx                 |   6 +-
 src/app/page.tsx                              |   6 +-
 .../cart/components/CartDrawer/CartDrawer.tsx |  10 +-
 .../cart/components/CartDrawer/Fields.tsx     |   2 +-
 .../cart/components/CartItemDrawer.tsx        |   2 +-
 src/modules/product/screens/Store.tsx         |  95 ---------
 src/modules/product/utils.ts                  |  17 --
 src/modules/store/screens/Store.tsx           | 185 ++++++++++++++++++
 src/modules/ui/components/form/toggle.tsx     |  45 +++++
 src/modules/ui/components/overlay/sheet.tsx   |   6 +-
 14 files changed, 320 insertions(+), 140 deletions(-)
 delete mode 100644 src/modules/product/screens/Store.tsx
 delete mode 100644 src/modules/product/utils.ts
 create mode 100644 src/modules/store/screens/Store.tsx
 create mode 100644 src/modules/ui/components/form/toggle.tsx

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index d2f2b26..f7c96bc 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -10,7 +10,6 @@ module.exports = {
     require.resolve("@vercel/style-guide/eslint/react"),
     require.resolve("@vercel/style-guide/eslint/next"),
     "plugin:prettier/recommended",
-    "plugin:tailwindcss/recommended",
   ],
   parserOptions: {
     ecmaVersion: "latest",
@@ -35,6 +34,7 @@ module.exports = {
         bracketSpacing: false,
         arrowParens: "always",
         endOfLine: "auto",
+        plugins: ["prettier-plugin-tailwindcss"],
       },
     ],
     "import/order": [
diff --git a/package.json b/package.json
index 991df3f..d39fa5d 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@radix-ui/react-label": "^2.0.1",
     "@radix-ui/react-radio-group": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.1",
+    "@radix-ui/react-toggle": "^1.0.2",
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
     "framer-motion": "^9.0.2",
@@ -55,6 +56,7 @@
     "jest": "^29.4.2",
     "postcss": "^8.4.21",
     "prettier": "^2.8.4",
+    "prettier-plugin-tailwindcss": "^0.2.8",
     "tailwindcss": "^3.3.2",
     "ts-jest": "^29.0.5",
     "ts-standard": "^12.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dfda5f5..d530894 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,6 +13,9 @@ dependencies:
   '@radix-ui/react-slot':
     specifier: ^1.0.1
     version: 1.0.1(react@18.2.0)
+  '@radix-ui/react-toggle':
+    specifier: ^1.0.2
+    version: 1.0.2(react-dom@18.2.0)(react@18.2.0)
   class-variance-authority:
     specifier: ^0.6.0
     version: 0.6.0(typescript@4.9.5)
@@ -120,6 +123,9 @@ devDependencies:
   prettier:
     specifier: ^2.8.4
     version: 2.8.4
+  prettier-plugin-tailwindcss:
+    specifier: ^0.2.8
+    version: 0.2.8(prettier@2.8.4)
   tailwindcss:
     specifier: ^3.3.2
     version: 3.3.2
@@ -1266,6 +1272,20 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-toggle@1.0.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-1MhVrHjgdmYDBgBpmOB0sjK096gFrVqUocsHNapkOTkZIxOwjpGxnW9e24CjQQX9D/c57dI6E8zAAdeAeIdY8g==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.13
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-primitive': 1.0.2(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.0(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-use-callback-ref@1.0.0(react@18.2.0):
     resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==}
     peerDependencies:
@@ -5459,6 +5479,58 @@ packages:
       synckit: 0.8.5
     dev: true
 
+  /prettier-plugin-tailwindcss@0.2.8(prettier@2.8.4):
+    resolution: {integrity: sha512-KgPcEnJeIijlMjsA6WwYgRs5rh3/q76oInqtMXBA/EMcamrcYJpyhtRhyX1ayT9hnHlHTuO8sIifHF10WuSDKg==}
+    engines: {node: '>=12.17.0'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@shufo/prettier-plugin-blade': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: '>=2.2.0'
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@shufo/prettier-plugin-blade':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      prettier: 2.8.4
+    dev: true
+
   /prettier@2.8.4:
     resolution: {integrity: sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==}
     engines: {node: '>=10.13.0'}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1db733c..cb5c460 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -23,7 +23,7 @@ const App = async ({children}: {children: React.ReactNode}) => {
       <head />
       <body className="m-auto max-w-screen-xl rounded-sm">
         <Providers>
-          <header className="mb-4 flex flex-col gap-4 p-4 sm:mb-8">
+          <header className="mb-4 flex flex-col gap-4 px-4 pt-4 sm:mb-8">
             <img
               alt={store.title}
               className="h-32 rounded-lg object-cover sm:h-64"
@@ -33,14 +33,14 @@ const App = async ({children}: {children: React.ReactNode}) => {
               <div className="-mt-20 rounded-full p-1 sm:-mt-16">
                 <img
                   alt={store.title}
-                  className="border-background h-32 w-32 rounded-full border-8"
+                  className="h-32 w-32 rounded-full border-8 border-background"
                   src={store.logo}
                 />
               </div>
               <div className="flex flex-col items-center gap-4 text-center sm:items-start sm:gap-2 sm:text-left">
                 <div className="flex flex-col gap-1">
                   <p className="text-3xl font-bold sm:text-4xl">{store.title}</p>
-                  <p className="text-muted-foreground font-medium">{store.subtitle}</p>
+                  <p className="font-medium text-muted-foreground">{store.subtitle}</p>
                 </div>
                 <div className="flex gap-2">
                   {store.instagram ? (
@@ -62,9 +62,9 @@ const App = async ({children}: {children: React.ReactNode}) => {
             </div>
           </header>
           <main className="px-4">{children}</main>
-          <footer className="mt-4 border-t p-4 sm:mt-8">
+          <footer className="mt-4 px-4 sm:mt-8">
             {/* Inicio de copyright - Cambiar el contenido de los mismos viola el contenido de los terminos de licencia */}
-            <p className="sm:text-md text-muted-foreground text-center text-sm">
+            <p className="sm:text-md border-t py-4 text-center text-sm text-muted-foreground">
               © Copyright {new Date().getFullYear()}. Hecho con <ThemeToggle /> y Next.js, por{" "}
               <a
                 className="underline"
diff --git a/src/app/mocks/[mock]/page.tsx b/src/app/mocks/[mock]/page.tsx
index b876fa5..a5027f6 100644
--- a/src/app/mocks/[mock]/page.tsx
+++ b/src/app/mocks/[mock]/page.tsx
@@ -1,9 +1,8 @@
 import productApi from "~/product/api";
 import cartApi from "~/cart/api";
 import storeApi from "~/store/api";
-import StoreScreen from "~/product/screens/Store";
+import StoreScreen from "~/store/screens/Store";
 import CartProvider from "~/cart/context";
-import {groupByCategory} from "~/product/utils";
 
 const IndexMockRoute = async ({
   params: {mock},
@@ -15,11 +14,10 @@ const IndexMockRoute = async ({
   const products = await productApi.mock.list(mock);
   const store = await storeApi.mock.fetch(mock);
   const fields = await cartApi.mock.list(mock);
-  const categories = groupByCategory(products);
 
   return (
     <CartProvider fields={fields}>
-      <StoreScreen categories={categories} fields={fields} store={store} />
+      <StoreScreen fields={fields} products={products} store={store} />
     </CartProvider>
   );
 };
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 992c621..e9e7207 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,19 +1,17 @@
 import productApi from "~/product/api";
 import cartApi from "~/cart/api";
 import storeApi from "~/store/api";
-import StoreScreen from "~/product/screens/Store";
 import CartProvider from "~/cart/context";
-import {groupByCategory} from "~/product/utils";
+import StoreScreen from "~/store/screens/Store";
 
 const IndexRoute = async () => {
   const products = await productApi.list();
   const fields = await cartApi.list();
   const store = await storeApi.fetch();
-  const categories = groupByCategory(products);
 
   return (
     <CartProvider fields={fields}>
-      <StoreScreen categories={categories} fields={fields} store={store} />
+      <StoreScreen fields={fields} products={products} store={store} />
     </CartProvider>
   );
 };
diff --git a/src/modules/cart/components/CartDrawer/CartDrawer.tsx b/src/modules/cart/components/CartDrawer/CartDrawer.tsx
index 96cfe27..7b3f901 100644
--- a/src/modules/cart/components/CartDrawer/CartDrawer.tsx
+++ b/src/modules/cart/components/CartDrawer/CartDrawer.tsx
@@ -21,13 +21,11 @@ import Fields from "./Fields";
 
 function CartDrawer({
   onClose,
-  isOpen,
   store,
   fields,
   ...props
 }: Omit<React.ComponentProps<typeof Sheet>, "children"> & {
   fields?: Field[];
-  isOpen: boolean;
   store: Store;
   onClose: VoidFunction;
 }) {
@@ -52,14 +50,8 @@ function CartDrawer({
     }
   }, [cart.size, onClose]);
 
-  useEffect(() => {
-    if (!isOpen) {
-      setCurrentStep("details");
-    }
-  }, [isOpen]);
-
   return (
-    <Sheet open={isOpen} onOpenChange={(_isOpen) => !_isOpen && onClose()} {...props}>
+    <Sheet open onOpenChange={(_isOpen) => !_isOpen && onClose()} {...props}>
       <SheetContent className="grid grid-cols-1 grid-rows-[auto_1fr_auto]" size="sm">
         <SheetHeader>
           <SheetTitle className="text-left text-2xl font-medium">Tu pedido</SheetTitle>
diff --git a/src/modules/cart/components/CartDrawer/Fields.tsx b/src/modules/cart/components/CartDrawer/Fields.tsx
index b256010..521b92f 100644
--- a/src/modules/cart/components/CartDrawer/Fields.tsx
+++ b/src/modules/cart/components/CartDrawer/Fields.tsx
@@ -28,7 +28,7 @@ function RadioField({
     <RadioGroup value={value} onValueChange={onChange}>
       <div className="flex flex-col gap-4">
         {options.map((option) => (
-          <div key={option} className="flex items-center space-x-3">
+          <div key={option} className="flex items-center gap-x-3">
             <RadioGroupItem id={option} value={option}>
               {option}
             </RadioGroupItem>
diff --git a/src/modules/cart/components/CartItemDrawer.tsx b/src/modules/cart/components/CartItemDrawer.tsx
index 311619a..414dd9f 100644
--- a/src/modules/cart/components/CartItemDrawer.tsx
+++ b/src/modules/cart/components/CartItemDrawer.tsx
@@ -78,7 +78,7 @@ function CartItemDrawer({
                     <RadioGroup value={formData.options?.[category.title]?.[0]?.title}>
                       <div className="flex flex-col gap-4">
                         {category.options.map((option) => (
-                          <div key={option.title} className="flex items-center space-x-3">
+                          <div key={option.title} className="flex items-center gap-x-3">
                             <RadioGroupItem
                               id={option.id}
                               value={option.title}
diff --git a/src/modules/product/screens/Store.tsx b/src/modules/product/screens/Store.tsx
deleted file mode 100644
index 2b941ee..0000000
--- a/src/modules/product/screens/Store.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-"use client";
-
-import type {Field} from "~/cart/types";
-import type {Store} from "~/store/types";
-
-import type {Product} from "../types";
-
-import {useState} from "react";
-
-import {Button} from "~/ui/components/control/button";
-import CartDrawer from "~/cart/components/CartDrawer";
-import {useCart} from "~/cart/context";
-
-import ProductCard from "../components/ProductCard";
-
-function StoreScreen({
-  fields,
-  categories,
-  store,
-}: {
-  fields: Field[];
-  categories: [Product["category"], Product[]][];
-  store: Store;
-}) {
-  const [{total, quantity}, {addItem}] = useCart();
-  const [isCartOpen, setIsCartOpen] = useState<boolean>(false);
-
-  return (
-    <>
-      <div className="flex flex-col gap-4 sm:gap-8">
-        <div className="flex flex-col gap-4 sm:gap-12">
-          {categories.length ? (
-            categories.map(([category, products]) => (
-              <div key={category} className="flex flex-col gap-4">
-                <h2 className="text-2xl font-semibold">
-                  {category} <span className="opacity-70">({category.length})</span>
-                </h2>
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-                  {products.length ? (
-                    products.map((product) => (
-                      <ProductCard
-                        key={product.id}
-                        product={product}
-                        onAdd={(_product: Product) =>
-                          addItem(Date.now(), {..._product, quantity: 1})
-                        }
-                      />
-                    ))
-                  ) : (
-                    <div className="flex flex-col gap-4">
-                      <h2 className="text-2xl font-semibold">No hay productos</h2>
-                    </div>
-                  )}
-                </div>
-              </div>
-            ))
-          ) : (
-            <div className="flex flex-col gap-4">
-              <h2 className="text-2xl font-semibold">No hay productos</h2>
-            </div>
-          )}
-        </div>
-        {Boolean(quantity) && (
-          <div className="sticky bottom-4 flex content-center items-center sm:m-auto">
-            <Button
-              className="w-full shadow-lg sm:w-fit"
-              data-testid="show-cart"
-              size="lg"
-              variant="brand"
-              onClick={() => setIsCartOpen(true)}
-            >
-              <div className="flex items-center gap-6">
-                <div className="flex items-center gap-3">
-                  <p className="leading-6">Ver pedido</p>
-                  <p className="rounded-sm bg-black/25 px-2 py-1 text-xs font-semibold text-white/90">
-                    {quantity} item
-                  </p>
-                </div>
-                <p className="leading-6">{total}</p>
-              </div>
-            </Button>
-          </div>
-        )}
-      </div>
-      <CartDrawer
-        fields={fields}
-        isOpen={isCartOpen}
-        store={store}
-        onClose={() => setIsCartOpen(false)}
-      />
-    </>
-  );
-}
-
-export default StoreScreen;
diff --git a/src/modules/product/utils.ts b/src/modules/product/utils.ts
deleted file mode 100644
index 367835b..0000000
--- a/src/modules/product/utils.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type {Product} from "./types";
-
-export function groupByCategory(products: Product[]): [Product["category"], Product[]][] {
-  const groups = products.reduce<Record<Product["category"], Product[]>>((acc, product) => {
-    const category = product.category;
-
-    if (!acc[category]) {
-      acc[category] = [];
-    }
-
-    acc[category].push(product);
-
-    return acc;
-  }, {});
-
-  return Object.entries(groups);
-}
diff --git a/src/modules/store/screens/Store.tsx b/src/modules/store/screens/Store.tsx
new file mode 100644
index 0000000..fd04b32
--- /dev/null
+++ b/src/modules/store/screens/Store.tsx
@@ -0,0 +1,185 @@
+"use client";
+
+import type {Field} from "~/cart/types";
+import type {Product} from "~/product/types";
+
+import type {Store} from "../types";
+
+import {useMemo, useState} from "react";
+import {SearchIcon, X, Table, StretchHorizontal, ChevronDown} from "lucide-react";
+
+import {Button} from "~/ui/components/control/button";
+import CartDrawer from "~/cart/components/CartDrawer";
+import {useCart} from "~/cart/context";
+import ProductCard from "~/product/components/ProductCard";
+import {Input} from "~/ui/components/form/input";
+
+import {Toggle} from "@/modules/ui/components/form/toggle";
+import {cn} from "@/modules/ui/utils";
+
+function StoreScreen({
+  fields,
+  products,
+  store,
+}: {
+  fields: Field[];
+  products: Product[];
+  store: Store;
+}) {
+  const [{total, quantity}, {addItem}] = useCart();
+  const [isCartOpen, setIsCartOpen] = useState<boolean>(false);
+  const [query, setQuery] = useState<string>("");
+  const [layout, setLayout] = useState<"list" | "grid">(() =>
+    products.length > 50 ? "list" : "grid",
+  );
+  const [selectedCategory, setSelectedCategory] = useState<Product["category"] | null>(null);
+  const categories = useMemo<[Product["category"], Product[]][]>(() => {
+    let draft = products;
+
+    // Filter products by search query
+    if (query) {
+      draft = draft.filter(({title, description}) =>
+        (title.toLowerCase() + description.toLowerCase()).includes(query.toLowerCase()),
+      );
+    }
+
+    // Group products by category
+    const groups = draft.reduce<Map<Product["category"], Product[]>>((map, product) => {
+      if (!map.has(product.category)) {
+        map.set(product.category, []);
+      }
+
+      map.set(product.category, map.get(product.category)!.concat(product));
+
+      return map;
+    }, new Map());
+
+    // Return them in a tuple of [category, products]
+    return Array.from(groups.entries());
+  }, [query, products]);
+
+  function handleSelectCategory(category: Product["category"]) {
+    setSelectedCategory((currentSelectedCategory) =>
+      currentSelectedCategory === category ? null : category,
+    );
+
+    // Scroll to the category
+    queueMicrotask(() => {
+      const categoryElement = document.getElementById(category);
+
+      if (categoryElement) {
+        categoryElement.scrollIntoView({block: "start", inline: "start"});
+      }
+    });
+  }
+
+  return (
+    <>
+      <div className="flex flex-col gap-4 sm:gap-8">
+        {/* Filters */}
+        <div className="flex items-center justify-between gap-4">
+          <div className="relative flex w-full items-center sm:max-w-xs">
+            <SearchIcon className="absolute left-3 h-4 w-4 opacity-40" />
+            <Input
+              className="px-9"
+              placeholder="Buscar..."
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+            />
+            {Boolean(query) && (
+              <X
+                className="absolute right-3 h-4 w-4 cursor-pointer opacity-40"
+                onClick={() => setQuery("")}
+              />
+            )}
+          </div>
+          <div className="flex gap-2">
+            <Toggle pressed={layout === "list"} onClick={() => setLayout("list")}>
+              <div className="text-2xl">
+                <StretchHorizontal className="h-6 w-6 cursor-pointer opacity-40" />
+              </div>
+            </Toggle>
+            <Toggle pressed={layout === "grid"} onClick={() => setLayout("grid")}>
+              <div className="text-2xl">
+                <Table className="h-6 w-6 cursor-pointer opacity-40" />
+              </div>
+            </Toggle>
+          </div>
+        </div>
+        {/* Grid of products by category */}
+        <div className="flex flex-col">
+          {categories.length ? (
+            categories.map(([category, categoryProducts]) => (
+              <div
+                key={category}
+                className="flex flex-col gap-8 border-t py-8 last-of-type:border-b"
+                id={category}
+              >
+                <div
+                  className={cn("flex items-center justify-between gap-4", {
+                    "cursor-pointer": layout === "list",
+                  })}
+                  onClick={() => handleSelectCategory(category)}
+                >
+                  <h2 className="text-xl font-semibold sm:text-2xl">
+                    {category} <span className="opacity-70">({categoryProducts.length})</span>
+                  </h2>
+                  {layout === "list" && <ChevronDown className="h-6 w-6 opacity-40" />}
+                </div>
+                {((layout === "list" && selectedCategory === category) || layout === "grid") && (
+                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                    {categoryProducts.length ? (
+                      categoryProducts.map((product) => (
+                        <ProductCard
+                          key={product.id}
+                          product={product}
+                          onAdd={(item: Product) => addItem(Date.now(), {...item, quantity: 1})}
+                        />
+                      ))
+                    ) : (
+                      <div className="flex flex-col gap-4">
+                        <h2 className="text-2xl font-semibold">No hay productos</h2>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            ))
+          ) : (
+            <div className="flex flex-col gap-4">
+              <h2 className="text-2xl font-semibold">No hay productos</h2>
+            </div>
+          )}
+        </div>
+        {/* Cart button */}
+        {Boolean(quantity) && (
+          <div className="sticky bottom-4 flex content-center items-center sm:m-auto">
+            <Button
+              className="w-full shadow-lg sm:w-fit"
+              data-testid="show-cart"
+              size="lg"
+              variant="brand"
+              onClick={() => setIsCartOpen(true)}
+            >
+              <div className="flex items-center gap-6">
+                <div className="flex items-center gap-3">
+                  <p className="leading-6">Ver pedido</p>
+                  <p className="rounded-sm bg-black/25 px-2 py-1 text-xs font-semibold text-white/90">
+                    {quantity} item
+                  </p>
+                </div>
+                <p className="leading-6">{total}</p>
+              </div>
+            </Button>
+          </div>
+        )}
+      </div>
+      {/* Cart Drawer */}
+      {Boolean(isCartOpen) && (
+        <CartDrawer fields={fields} store={store} onClose={() => setIsCartOpen(false)} />
+      )}
+    </>
+  );
+}
+
+export default StoreScreen;
diff --git a/src/modules/ui/components/form/toggle.tsx b/src/modules/ui/components/form/toggle.tsx
new file mode 100644
index 0000000..4cead3f
--- /dev/null
+++ b/src/modules/ui/components/form/toggle.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import type {VariantProps} from "class-variance-authority";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import {cva} from "class-variance-authority";
+
+import {cn} from "../../utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background hover:bg-muted hover:text-muted-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "bg-transparent border border-input hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({className, variant, size, ...props}, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({variant, size, className}))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export {Toggle, toggleVariants};
diff --git a/src/modules/ui/components/overlay/sheet.tsx b/src/modules/ui/components/overlay/sheet.tsx
index 55ffa0b..735561d 100644
--- a/src/modules/ui/components/overlay/sheet.tsx
+++ b/src/modules/ui/components/overlay/sheet.tsx
@@ -158,7 +158,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      <SheetPrimitive.Close className="absolute right-2 top-2 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-6 w-6" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
@@ -170,7 +170,7 @@ SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 function SheetHeader({className, ...props}: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+    <div className={cn("flex flex-col gap-y-2 text-center sm:text-left", className)} {...props} />
   );
 }
 SheetHeader.displayName = "SheetHeader";
@@ -178,7 +178,7 @@ SheetHeader.displayName = "SheetHeader";
 function SheetFooter({className, ...props}: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+      className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2", className)}
       {...props}
     />
   );