Setup select element

Lila-Kuhlt · Jun 20, 2024 · 0f2847a · 0f2847a
1 parent ed06848
commit 0f2847a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/liberica/bun.lockb b/liberica/bun.lockb
diff --git a/liberica/src/components/lila/select.tsx b/liberica/src/components/lila/select.tsx
@@ -1,8 +1,25 @@
-export type SelectProps = Omit<React.ComponentProps<"select">, "className">;
+import { classes } from "components/lila";
+
+export type SelectProps = Omit<
+    React.ComponentProps<"select">,
+    "className" | "size"
+> &
+    SelectPropsExt;
+export interface SelectPropsExt {
+    size?: keyof typeof INPUT_SIZES;
+    noLogo?: boolean;
+}
+
+export const BASE =
+    "text-on-muted rounded-xl bg-muted/20 outline-none ring-muted focus:ring-2";
+
+export const INPUT_SIZES = {
+    lg: "px-6 py-3 text-md",
+};
 
 export function Select(props: SelectProps) {
     return (
-        <select className="text-text rounded-xl bg-muted/20 px-6 py-3">
+        <select className={classes(BASE, INPUT_SIZES[props.size ?? "lg"])}>
             {props.children}
         </select>
     );

diff --git a/liberica/src/page/Debug.tsx b/liberica/src/page/Debug.tsx
@@ -6,6 +6,7 @@ import {
     ButtonVariant,
 } from "components/lila/button";
 import { TextInput } from "components/lila/input";
+import { Select } from "components/lila/select";
 import { THEMES, ThemeName, applyTheme } from "lib/theme";
 import { useState } from "react";
 
@@ -19,9 +20,10 @@ export function Debug() {
             <TextInput
                 placeholder="Enter example text"
                 onChange={(e) => setText(e.target.value || "Test")}
-            ></TextInput>
+            />
 
-            <select
+            <Select
+                size="lg"
                 onChange={(e) =>
                     applyTheme(e.target.value as ThemeName, {
                         broadcast: true,
@@ -32,7 +34,7 @@ export function Debug() {
                 {Object.keys(THEMES).map((theme) => (
                     <option key={theme}>{theme}</option>
                 ))}
-            </select>
+            </Select>
 
             <table className="table-auto border-spacing-2">
                 <thead>