Merge pull request #4 from Redish101/dev

24.5.4 dev累计更新同步

ui/src/App.tsx

@@ -1,7 +1,25 @@
+import Button from "@/components/Button";
+import TextField from "@/components/TextField";
+
 export default function App() {
   return (
-    <div>
-
+    <div className="flex gap-1 p-24">
+      <div>
+        <h2 className="font-light text-3xl">Buttons</h2>
+        <div className="flex gap-1">
+          <Button variant="filled">Button</Button>
+          <Button variant="outlined">Button</Button>
+          <Button variant="text">Button</Button>
+        </div>
+        <h2 className="font-light text-3xl mt-12">Text Fields</h2>
+        <div className="flex gap-1">
+          <TextField
+            label="Label"
+            placeholder="Placeholder"
+            variant="filled"
+          />
+        </div>
+      </div>
     </div>
   );
 }

ui/src/components/Button.tsx

@@ -2,14 +2,28 @@ import { HTMLAttributes, ReactNode } from "react";
 
 export interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
     children: ReactNode,
+    variant?: "filled" | "outlined" | "text"
 }
 
 export default function Button({
     children,
+    variant = "filled",
     ...rest
 }: ButtonProps) {
+    let varinatStyle = ""
+    if (variant === "filled") {
+        varinatStyle = "b-none bg-primary text-white hover:bg-secondary"
+    }
+    if (variant === "outlined") {
+        varinatStyle = "b-1 border-gray-400 border-solid bg-bg hover:bg-hover text-primary"
+    }
+    if (variant === "text") {
+        varinatStyle = "b-none bg-transparent text-primary hover:text-secondary hover:bg-hover"
+    }
+
     return (
         <button
+            className={"h-9 rounded flex flex-col justify-center items-center px-5 ease-in-out transition-all duration-300 font-semibold " + varinatStyle}
             {...rest}
         >
             {children}

ui/src/components/TextField.tsx

@@ -0,0 +1,28 @@
+import { InputHTMLAttributes } from "react";
+
+export interface TextFieldProps extends InputHTMLAttributes<HTMLElement> {
+    label: string;
+    placeholder: string;
+    variant?: "filled" | "outlined"
+}
+
+export default function TextField({
+    label,
+    placeholder,
+    variant = "filled",
+    ...rest
+}: TextFieldProps) {
+    return (
+        <div>
+            <label
+                className="pos-absolute px-4 pt-2 text-sm text-gray-500"
+            >{label}</label>
+            <input
+                placeholder={placeholder}
+                className="border-b-2 b-t-none b-x-none pt-7 rounded-t-md text-base flex justify-start items-start px-4 pb-2 bg-gray-200 placeholder-gray-600 placeholder-text-base outline-none focus:b-b-primary ease-in-out transition-all duration-300
+                "
+                {...rest}
+            />
+        </div>
+    )
+}