Formatiando el codigo

Author: igrisdev

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "jsxSingleQuote": false,
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}

package.json

@@ -24,5 +24,9 @@
     "tailwindcss": "3.4.14",
     "typescript": "5.6.3",
     "zustand": "5.0.1"
+  },
+  "devDependencies": {
+    "prettier": "^3.4.2",
+    "prettier-plugin-astro": "^0.14.1"
   }
 }

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 ---
-import InfoHeader from "@components/general/InfoHeader.astro"
-import { SearchProducts } from "@components/allProducts/componentsIslands/SearchProducts"
-import { TextoButton } from "@components/allProducts/componentsIslands/TextoButton"
+import InfoHeader from '@components/general/InfoHeader.astro'
+import { SearchProducts } from '@components/allProducts/componentsIslands/SearchProducts'
+import { TextoButton } from '@components/allProducts/componentsIslands/TextoButton'
 ---
 
 <header
@@ -34,7 +34,6 @@ import { TextoButton } from "@components/allProducts/componentsIslands/TextoButt
   </section>
 </header>
 
-
 <script>
   const $ = (selector: string) => document.querySelector(selector)
 

src/components/allProducts/components/HeaderProducts.astro

@@ -1,32 +1,38 @@
-import type { Product, ProductData } from "@/env";
+import type { Product, ProductData } from '@/env'
 
-import { useEffect } from "react";
+import { useEffect } from 'react'
 
-import { useStoreProducts } from "@/stores/storeProducts";
+import { useStoreProducts } from '@/stores/storeProducts'
 
-import CardProductSmall from "@components/allProducts/componentsIslands/CardProductSmall";
+import CardProductSmall from '@components/allProducts/componentsIslands/CardProductSmall'
 
 export default function AllProducts({
   allProducts,
 }: {
-  allProducts: ProductData;
+  allProducts: ProductData
 }) {
-  const { setProducts, products, cacheProducts, setLoading, loading, setCacheProducts } =
-    useStoreProducts();
+  const {
+    setProducts,
+    products,
+    cacheProducts,
+    setLoading,
+    loading,
+    setCacheProducts,
+  } = useStoreProducts()
 
   useEffect(() => {
     if (allProducts.length > 0) {
-      setCacheProducts(allProducts);
-      setProducts(allProducts);
-      setLoading(false);
+      setCacheProducts(allProducts)
+      setProducts(allProducts)
+      setLoading(false)
     } else {
-      setLoading(false);
+      setLoading(false)
     }
-  }, []);
+  }, [])
 
   return (
     <div className="flex-1 flex flex-col gap-12 pb-10">
-      <div className={`${products?.length < 2 ? "two-products" : "products"}`}>
+      <div className={`${products?.length < 2 ? 'two-products' : 'products'}`}>
         {loading && <p className="text-center text-local_text">Cargando...</p>}
 
         {!loading && products?.length == 0 && (
@@ -47,10 +53,10 @@ export default function AllProducts({
                 price={price}
                 descuento={descuento}
               />
-            );
+            )
           }
         )}
       </div>
     </div>
-  );
+  )
 }

src/components/allProducts/componentsIslands/AllProducts.tsx

@@ -1,6 +1,6 @@
-import { useFilterAllProducts } from "@hooks/useFilterAllProducts"
-import { parsePrice } from "@utils/parsePrice"
-import { useEffect, useState } from "react"
+import { useFilterAllProducts } from '@hooks/useFilterAllProducts'
+import { parsePrice } from '@utils/parsePrice'
+import { useEffect, useState } from 'react'
 
 export const AsideFilters = ({
   categories,
@@ -9,15 +9,28 @@ export const AsideFilters = ({
   categories: string[]
   brands: string[]
 }) => {
-  const { filter, handlePrice, handleCategories, handleDiscount, handleBrands } = useFilterAllProducts()
+  const {
+    filter,
+    handlePrice,
+    handleCategories,
+    handleDiscount,
+    handleBrands,
+  } = useFilterAllProducts()
 
-  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
-  const [selectedBrands, setSelectedBrands] = useState<string[]>([]);
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([])
+  const [selectedBrands, setSelectedBrands] = useState<string[]>([])
 
-  const { categories: categoriesStore, brands: brandsStore, discount, price } = filter
+  const {
+    categories: categoriesStore,
+    brands: brandsStore,
+    discount,
+    price,
+  } = filter
 
-  const handleChangeCategories = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value;
+  const handleChangeCategories = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = event.target.value
 
     setSelectedCategories((prev: string[]) =>
       event.target.checked
@@ -26,10 +39,13 @@ export const AsideFilters = ({
     )
   }
 
-  useEffect(() => handleCategories({ categories: selectedCategories }), [selectedCategories])
+  useEffect(
+    () => handleCategories({ categories: selectedCategories }),
+    [selectedCategories]
+  )
 
   const handleChangeBrands = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value;
+    const value = event.target.value
 
     setSelectedBrands((prev: string[]) =>
       event.target.checked
@@ -53,10 +69,11 @@ export const AsideFilters = ({
           <h3 className="border-b-2 pb-2 mb-2">Categorías</h3>
           <ul className="flex flex-col gap-2">
             {categories?.map((category) => (
-              <li className="flex gap-2 items-center select-none" key={category}>
-                <label
-                  className="flex justify-center items-center gap-2"
-                >
+              <li
+                className="flex gap-2 items-center select-none"
+                key={category}
+              >
+                <label className="flex justify-center items-center gap-2">
                   <input
                     type="checkbox"
                     id={category}
@@ -76,9 +93,7 @@ export const AsideFilters = ({
           <ul className="flex flex-col gap-2">
             {brands?.map((brand) => (
               <li className="flex gap-2 items-center select-none" key={brand}>
-                <label
-                  className="flex justify-center items-center gap-2"
-                >
+                <label className="flex justify-center items-center gap-2">
                   <input
                     type="checkbox"
                     id={brand}
@@ -97,9 +112,7 @@ export const AsideFilters = ({
           <h3 className="border-b-2 pb-2 mb-2">Descuento</h3>
           <ul className="flex flex-col gap-2">
             <li className="flex gap-2 items-center select-none">
-              <label
-                className="flex justify-center items-center gap-2"
-              >
+              <label className="flex justify-center items-center gap-2">
                 <input
                   type="checkbox"
                   id="descuento"
@@ -126,7 +139,9 @@ export const AsideFilters = ({
               />
               <div className="flex justify-between">
                 <span className="text-sm">$0</span>
-                <span className="text-sm">${price == 0 ? 0 : parsePrice(price)}</span>
+                <span className="text-sm">
+                  ${price == 0 ? 0 : parsePrice(price)}
+                </span>
                 <span className="text-sm">$6,000,000</span>
               </div>
             </li>