feat(react): add DropdownState component (#42)

Author: Josem1801

js/react/lib/components/badge/badge.component.tsx

@@ -20,7 +20,7 @@ export const Badge = withAs(
       <Component
         {...rest}
         className={cn([
-          "text-paragraph-2 flex items-center gap-1 rounded-full border-[0.8px] border-black px-2",
+          "text-paragraph-2 flex w-fit items-center gap-1 rounded-full border-[0.8px] border-black px-2",
           BADGE_VARIANTS[variant],
           BADGE_TYPE[type],
           "desktop:text-[12px] text-[10px]",

js/react/lib/components/dropdown/dropdown.component.tsx

@@ -0,0 +1,67 @@
+import { cn } from "@/utils/tw-merge";
+import { BADGE_TEXT, BadgeVariants } from "../badge/badge.const";
+import { useState } from "react";
+import { ArrowDown, ArrowUp } from "@/icons";
+import { Badge } from "../badge";
+import { DROPDOWN_OPTIONS, DROPDOWN_STATUS_VARIANTS } from "./dropdown.const";
+
+type DropdownStateProps = {
+  value: BadgeVariants;
+  onChange: (value: BadgeVariants) => void;
+};
+
+export const DropdownState = ({ value, onChange }: DropdownStateProps) => {
+  const [open, setOpen] = useState(false);
+
+  const handleOpen = () => setOpen(status => !status);
+
+  const handleSelect = (val: BadgeVariants) => {
+    onChange(val);
+    setOpen(false);
+  };
+
+  const Icon = open ? ArrowUp : ArrowDown;
+
+  return (
+    <div className="relative grid w-fit">
+      <button
+        onClick={handleOpen}
+        className={cn([
+          "shadow-rb-black text-paragraph-2 flex h-6 items-center gap-1 overflow-hidden rounded-sm border border-black",
+          DROPDOWN_STATUS_VARIANTS[value],
+          "text-[12px]",
+        ])}
+      >
+        <div className="ml-2 size-1 rounded-full" />
+        <span className="mr-2">{BADGE_TEXT[value]}</span>
+        <Icon
+          className={cn([
+            "size-6 rounded-r-sm border-l border-l-black",
+            "bg-white text-black",
+            "dark:bg-dark dark:text-neutral-50",
+          ])}
+        />
+      </button>
+      <div
+        className={cn([
+          "absolute left-0 top-full mt-2 w-full transition duration-200",
+          open ? "visible opacity-100" : "invisible opacity-0",
+        ])}
+      >
+        {open && (
+          <ul className="options shadow-rb-black dark:bg-dark grid gap-1.5 rounded-sm border border-black bg-white px-2 py-1.5 transition">
+            {DROPDOWN_OPTIONS.map(opt => (
+              <li
+                key={opt.value}
+                className="option cursor-pointer"
+                onClick={() => handleSelect(opt.value)}
+              >
+                <Badge type="text" variant={opt.value} />
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+};

js/react/lib/components/dropdown/dropdown.const.ts

@@ -0,0 +1,32 @@
+import { BadgeVariants } from "../badge/badge.const";
+
+export const DROPDOWN_STATUS_VARIANTS = {
+  completed: [
+    "bg-success-100 text-success-600 [&>div]:bg-success-600",
+    "dark:bg-success-900 dark:text-success-400 dark:[&>div]:bg-success-400",
+  ],
+  reading: [
+    "bg-warning-100 text-warning-500 [&>div]:bg-warning-500",
+    "dark:bg-warning-950 dark:text-warning-300 [&>div]:bg-warning-300",
+  ],
+  pending: [
+    "bg-error-100 text-error-600 [&>div]:bg-error-600",
+    "dark:bg-error-950 dark:text-error-300 [&>div]:bg-error-300",
+  ],
+  unread: [
+    "bg-neutral-100 text-neutral-500 [&>div]:bg-neutral-500",
+    "dark:bg-neutral-950 dark:text-neutral-300 [&>div]:bg-neutral-300",
+  ],
+};
+
+export type Option = {
+  label: string;
+  value: BadgeVariants;
+};
+
+export const DROPDOWN_OPTIONS: Array<Option> = [
+  { label: "Completo", value: "completed" },
+  { label: "Leyendo", value: "reading" },
+  { label: "Pendiente", value: "pending" },
+  { label: "No leído", value: "unread" },
+];

js/react/lib/components/dropdown/index.ts

@@ -0,0 +1 @@
+export * from "./dropdown.component";

js/react/lib/index.ts

@@ -8,4 +8,5 @@ export * from "./components/avatar";
 export * from "./components/collaborators";
 export * from "./components/radio";
 export * from "./components/badge";
+export * from "./components/dropdown";
 export * from "./icons";

js/react/showcase/App.tsx

@@ -10,6 +10,7 @@ import {
   Collaborators,
   Radio,
   Badge,
+  DropdownState,
 } from "@rustlanges/react";
 import { ShowComponent } from "./ShowComponent";
 
@@ -242,6 +243,21 @@ export function App() {
           },
         }}
       />
+      <ShowComponent
+        component={DropdownState}
+        title="Dropdown State"
+        propsDef={{
+          onChange: {
+            type: "callback",
+            default: console.log,
+          },
+          value: {
+            type: "string",
+            options: ["completed", "pending", "reading", "unread"],
+            default: "completed",
+          },
+        }}
+      />
     </div>
   );
 }