Add Dropdown component: create a new Dropdown component with customizable items and callback functionality for value selection, enhancing UI interactivity.

src/components/atoms/Dropdown/index.tsx

@@ -0,0 +1,43 @@
+"use client";
+import { FC, useEffect, useState } from "react";
+import { FaFilter } from "react-icons/fa";
+
+type Props = {
+  items: {
+    label: string;
+    value: string;
+  }[];
+  defaultValue: string;
+  callback?: (value: string) => void;
+};
+
+export const Dropdown: FC<Props> = ({ items, defaultValue, callback }) => {
+  const [value, setValue] = useState<string>(defaultValue);
+
+  useEffect(() => {
+    callback?.(value);
+  }, [value]);
+
+  return (
+    <div className="relative inline-block">
+      <button className="focus:[&+div]:opacity-100 relative z-10 block p-2 shadow-sm cursor-pointer bg-white text-primary rounded-md">
+        <FaFilter />
+      </button>
+
+      <div className="absolute left-0 z-20 w-48 py-2 mt-2 origin-top-right bg-white rounded-md shadow-xl dark:bg-gray-800 opacity-0">
+        {items.map((item) => (
+          <p
+            onClick={() => {
+              setValue(item.value);
+            }}
+            className={`block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-300 transform  hover:bg-primary-50 cursor-pointer ${
+              value === item.value ? "bg-primary-50" : ""
+            }`}
+          >
+            {item.label}
+          </p>
+        ))}
+      </div>
+    </div>
+  );
+};