feat(shop-page): implement shop page

- implement shop page ui components
- implement search and filter functionality

[Delivers #90]

package.json

@@ -16,30 +16,36 @@
     "pre-commit": "npm run lint:fix && npm run format"
   },
   "dependencies": {
+    "@react-jvectormap/core": "^1.0.4",
     "@reduxjs/toolkit": "^2.2.5",
     "@testing-library/user-event": "^14.5.2",
     "@types/react-redux": "^7.1.33",
     "@types/react-router-dom": "^5.3.3",
+    "@types/swiper": "^6.0.0",
     "axios": "^1.7.2",
     "axios-mock-adapter": "^1.22.0",
     "chart.js": "^4.4.3",
     "dotenv": "^16.4.5",
     "formik": "^2.4.6",
     "hero-slider": "^3.2.1",
     "history": "^5.3.0",
+    "jquery": "^3.7.1",
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.400.0",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
     "react-loader-spinner": "^6.1.6",
+    "react-loading-skeleton": "^3.4.0",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
+    "react-slider": "^2.0.6",
     "react-spinners": "^0.14.1",
     "react-toastify": "^10.0.5",
     "redux": "^5.0.1",
     "redux-mock-store": "^1.5.4",
+    "swiper": "^11.1.5",
     "webfontloader": "^1.6.28",
     "yup": "^1.4.0"
   },
@@ -52,6 +58,7 @@
     "@types/node": "^20.14.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.2.22",
+    "@types/react-slider": "^1.3.6",
     "@types/redux-mock-store": "^1.0.6",
     "@types/testing-library__react": "^10.2.0",
     "@types/webfontloader": "^1.6.38",

src/components/form/HSInput.tsx

@@ -8,6 +8,7 @@ interface MyInputProps {
   label?: string;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onChangeTextArea?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   placeholder: string;
   type?: string;
   text?: string;
@@ -25,6 +26,7 @@ function HSInput({
   label,
   onChange,
   onChangeTextArea,
+  onKeyDown,
   placeholder,
   type,
   text,
@@ -51,6 +53,7 @@ function HSInput({
             placeholder={placeholder}
             className="w-full h-full bg-transparent py-3 outline-none"
             maxLength={maxLength}
+            onKeyDown={onKeyDown}
           />
         </div>
       ) : (

src/components/home/ProductSkeleton.tsx

@@ -0,0 +1,55 @@
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+const ProductSkeleton = ({ cards }: { cards: number }) => {
+  return Array(cards)
+    .fill(0)
+    .map(() => (
+      <div
+        className="flex flex-col items-center justify-between rounded-lg bg-white xs:w-full lg:w-60 h-60 p-2"
+        key={crypto.randomUUID()}
+      >
+        <div className="w-full flex flex-col items-center">
+          <div className="w-full h-[100px]">
+            <Skeleton
+              width="100%"
+              height="100%"
+              baseColor="#F3F4F6"
+              highlightColor="#E0E0E0"
+            />
+          </div>
+          <div className="flex flex-col w-full mt-4">
+            <Skeleton
+              width="100%"
+              height={7}
+              baseColor="#F3F4F6"
+              highlightColor="#E0E0E0"
+            />
+            <Skeleton
+              width="100%"
+              height={7}
+              baseColor="#F3F4F6"
+              highlightColor="#E0E0E0"
+              className="mt-2"
+            />
+          </div>
+        </div>
+        <div className="flex w-full justify-between items-center">
+          <Skeleton
+            width={80}
+            height={40}
+            baseColor="#F3F4F6"
+            highlightColor="#E0E0E0"
+          />
+          <Skeleton
+            width={40}
+            height={40}
+            baseColor="#F3F4F6"
+            highlightColor="#E0E0E0"
+          />
+        </div>
+      </div>
+    ));
+};
+
+export default ProductSkeleton;