Merge pull request #36 from ivalshamkya/feat/select

feat: new select component

apps/www/src/components/example/SelectExample.tsx

@@ -0,0 +1,25 @@
+'use client';
+import Select from "@/components/neobruu/Select";
+import { ChangeEvent, useState } from "react";
+
+export default function SelectExample() {
+  const [value1, setValue1] = useState<string>("");
+
+  const handleInput1 = (e: ChangeEvent<HTMLSelectElement>) => {
+    setValue1(e.target.value);
+  };
+
+  return (
+    <div className="flex flex-wrap gap-3">
+      <Select
+        onChange={handleInput1}
+        variant="light"
+        rounded="md"
+      >
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+        <option value="3">Option 3</option>
+      </Select>
+    </div>
+  );
+}

apps/www/src/components/neobruu/Select.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { VariantProps, cva } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const selectVariants = cva(
+  "border-2 border-black py-[10px] px-[20px] shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] outline-none transition-all",
+  {
+    variants: {
+      variant: {
+        primary: "focus:bg-orange-200",
+        secondary: "focus:bg-pink-200",
+        light: "focus:bg-slate-50",
+        dark: "focus:text-white focus:bg-zinc-900",
+        blue: "focus:bg-blue-200",
+        yellow: "focus:bg-[#f7cb46]",
+        green: "focus:bg-green-200",
+        red: "focus:bg-red-200",
+      },
+      rounded: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        full: "rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      rounded: "none",
+    },
+  },
+);
+
+interface SelectProps
+  extends React.SelectHTMLAttributes<HTMLSelectElement>,
+    VariantProps<typeof selectVariants> {}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, children, variant, rounded, ...props }, ref) => {
+    return (
+      <select
+        className={cn(selectVariants({ variant, rounded, className }))}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </select>
+    );
+  },
+);
+
+Select.displayName = "Select";
+
+export default Select;
+

apps/www/src/data/components.ts

@@ -31,6 +31,8 @@ import AccordionExample from "@/components/example/AccordionExample";
 import DrawerExample from "@/components/example/DrawerExample";
 import DialogExample from "@/components/example/DialogExample";
 import RadioExample from "@/components/example/RadioExample";
+import Select from "@/components/neobruu/Select";
+import SelectExample from "@/components/example/SelectExample";
 
 type ComponentObj = {
   name: string;
@@ -88,14 +90,12 @@ const components: ComponentObj[] = [
   {
     name: "Dialog",
     sub: "Overlay component used to display important information, receive user input, or confirm actions within the application interface.",
-    isNew: true,
     component: Dialog,
     exampleComponent: DialogExample,
   },
   {
     name: "Drawer",
     sub: "Sliding panel or container typically used for navigation, displaying additional content, or providing contextual options within the application interface.",
-    isNew: true,
     component: Drawer,
     exampleComponent: DrawerExample,
   },
@@ -116,6 +116,14 @@ const components: ComponentObj[] = [
     sub: "Interactive element allowing users to select or deselect options within forms or lists.",
     component: Radio,
     exampleComponent: RadioExample,
+    isNew: true
+  },
+  {
+    name: "Select",
+    sub: "Interactive field for users to enter or edit text, numbers, or other data within forms or Select fields.",
+    component: Select,
+    exampleComponent: SelectExample,
+    isNew: true
   },
   {
     name: "Tabs",
@@ -161,4 +169,4 @@ for (let i = 0; i < components.length; i++) {
   }
 }
 
-export default components;
+export default components;