feat: searchbar slice

components/GameDropdown/game-dropdown.jsx

@@ -0,0 +1,68 @@
+import { updateGameOpen, updateGameValue } from "@/store/slices/searchBarSlice";
+import classes from "./game-dropdown.module.css";
+import Image from "next/image";
+import { useDispatch } from "react-redux";
+import { useRef } from "react";
+import useOutsideClick from "@/hooks/useOutsideClick";
+import { Skeleton } from "../ui/skeleton";
+
+const Dropdown = ({ items, searchBarState }) => {
+  const dispatch = useDispatch();
+  const ref = useRef(null);
+
+  const closeDropdown = () => {
+    dispatch(updateGameOpen(false));
+  };
+
+  useOutsideClick(ref, null, closeDropdown);
+
+  const toggleDropdown = () => {
+    dispatch(updateGameOpen(!searchBarState.game.open));
+  };
+
+  const handleItemClick = (item) => {
+    dispatch(updateGameOpen(false));
+    dispatch(updateGameValue(item));
+  };
+
+  return (
+    <div className={`${classes["dropdown"]}`} ref={ref}>
+      <div className={classes["dropdown-header"]} onClick={toggleDropdown}>
+        {searchBarState.game.value ? (
+          <Image
+            src={searchBarState.game.value?.image}
+            alt={`selected logo`}
+            fill
+            sizes="100vw"
+            className="object-contain"
+          />
+        ) : (
+          <Skeleton />
+        )}
+      </div>
+      <div
+        className={`${classes["dropdown-body"]} ${
+          searchBarState.game.open && classes["open"]
+        }`}
+      >
+        {items.map((item) => (
+          <div
+            className={classes["dropdown-item"]}
+            onClick={(e) => handleItemClick(item)}
+            key={item.id}
+          >
+            <Image
+              src={item.image}
+              alt={`selected logo`}
+              fill
+              sizes="100vw"
+              className="object-contain"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Dropdown;

components/Dropdown/Dropdown.module.css → components/GameDropdown/game-dropdown.module.css

@@ -1,5 +1,5 @@
 .dropdown {
-  width: 100%;
+  width: 2.5rem;
   height: 2.5rem;
 }
 
@@ -22,19 +22,13 @@
   position: absolute;
   top: 100%;
   left: 0;
-  width: 3rem;
+  width: 6rem;
   z-index: -1;
   pointer-events: none;
   transition: 0.1s ease-in-out all;
   padding-top: 1rem;
 }
 
-@media (min-width: 640px) {
-  .dropdown-body {
-    width: 6rem;
-  }
-}
-
 .dropdown-body.open {
   pointer-events: all;
   opacity: 1;

components/RegionDropdown/region-dropdown.jsx

@@ -0,0 +1,69 @@
+import classes from "./region-dropdown.module.css";
+import { useDispatch } from "react-redux";
+import {
+  updateRegionOpen,
+  updateRegionValue,
+} from "@/store/slices/searchBarSlice";
+import { useRef } from "react";
+import useOutsideClick from "@/hooks/useOutsideClick";
+import { Skeleton } from "../ui/skeleton";
+
+const Dropdown = ({ items, searchBarState }) => {
+  const dispatch = useDispatch();
+  const ref = useRef(null);
+
+  const closeDropdown = () => {
+    dispatch(updateRegionOpen(false));
+  };
+
+  useOutsideClick(ref, null, closeDropdown);
+
+  const toggleDropdown = () => {
+    dispatch(updateRegionOpen(!searchBarState.region.open));
+  };
+
+  const handleItemClick = (item) => {
+    dispatch(updateRegionOpen(false));
+    dispatch(updateRegionValue(item));
+  };
+
+  return (
+    <div className={`${classes["dropdown"]}`} ref={ref}>
+      {searchBarState.region.value ? (
+        <div className={classes["dropdown-header"]} onClick={toggleDropdown}>
+          <span className="font-bold text-white text-[14px] sm:text-[16px] bg-accent py-1 px-1 rounded-sm">
+            {searchBarState.region.value?.label}
+          </span>
+        </div>
+      ) : (
+        <Skeleton className="w-[48px] h-8" />
+      )}
+
+      <div
+        className={`${classes["dropdown-body"]} ${
+          searchBarState.region.open && classes["open"]
+        }`}
+      >
+        {items.map((item) => (
+          <div
+            className={classes["dropdown-item"]}
+            onClick={(e) => handleItemClick(item)}
+            key={item.code}
+          >
+            <span
+              className={`font-light text-sm w-100 text-white ${
+                item.code === searchBarState.region.value?.code
+                  ? "bg-accent"
+                  : "bg-transparent"
+              }`}
+            >
+              {item.label}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Dropdown;

components/RegionDropdown/region-dropdown.module.css

@@ -0,0 +1,80 @@
+.dropdown {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.dropdown-header {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dropdown-header img {
+  padding: 0.5rem;
+}
+
+.dropdown-body {
+  background-color: rgba(23, 26, 34, 0.3);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  opacity: 0;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 6rem;
+  z-index: -1;
+  pointer-events: none;
+  transition: 0.1s ease-in-out all;
+  padding-top: 0.5rem;
+  max-height: 15rem;
+  overflow-y: auto;
+}
+
+.dropdown-body.open {
+  pointer-events: all;
+  opacity: 1;
+  z-index: 1;
+}
+
+.dropdown-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 0.25rem 0;
+}
+
+.dropdown-item span {
+  flex: 1;
+  text-align: center;
+}
+
+.dropdown-item:hover {
+  cursor: pointer;
+}
+
+.dropdown-item-dot {
+  opacity: 0;
+  color: #91a5be;
+  transition: all 0.2s ease-in-out;
+}
+
+.dropdown-item-dot.selected {
+  opacity: 1;
+}
+
+.icon {
+  font-size: 13px;
+  color: #91a5be;
+  transform: rotate(0deg);
+  transition: all 0.2s ease-in-out;
+}
+
+.icon.open {
+  transform: rotate(90deg);
+}