feat(ui): add width prop to Button

finxol · Jan 9, 2025 · 6a4a4db · 6a4a4db
1 parent 4caf6d8
commit 6a4a4db
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 8 deletions.
diff --git a/apps/web/src/app/auth/login/page.tsx b/apps/web/src/app/auth/login/page.tsx
@@ -1,7 +1,7 @@
 import { Metadata } from "next"
 
 import getAppConfig from "@karr/config"
-import { Button } from "@karr/ui/Button"
+import { Button } from "@karr/ui/button"
 
 import { login } from "./login"
 

diff --git a/apps/web/src/app/auth/signup/page.tsx b/apps/web/src/app/auth/signup/page.tsx
@@ -1,7 +1,7 @@
 import { Metadata } from "next"
 
 import getAppConfig from "@karr/config"
-import { Button } from "@karr/ui/Button"
+import { Button } from "@karr/ui/button"
 
 export const metadata: Metadata = {
     title: `${getAppConfig().APPLICATION_NAME} Signup`

diff --git a/apps/web/src/app/loginaccount.tsx b/apps/web/src/app/loginaccount.tsx
@@ -3,7 +3,7 @@
 import { useState } from "react"
 import Link from "next/link"
 
-import { Button } from "@karr/ui/Button"
+import { Button } from "@karr/ui/button"
 
 export default function LoginAccount() {
     const [loggedIn, setLoggedIn] = useState(false)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -4,7 +4,7 @@ import logo from "@/assets/logo-tmp.jpg"
 import EditConfig from "@/components/EditConfig"
 
 import getAppConfig from "@karr/config"
-import { Button } from "@karr/ui/Button"
+import { Button } from "@karr/ui/button"
 
 export default function Home() {
     return (

diff --git a/apps/web/src/components/EditConfig.tsx b/apps/web/src/components/EditConfig.tsx
@@ -1,12 +1,13 @@
 import { revalidatePath } from "next/cache"
 
 import { setAppConfig } from "@karr/config"
+import { Button } from "@karr/ui/button"
 
 export default function EditConfig() {
     return (
         <>
             <form
-                className="mt-12 flex flex-col"
+                className="mt-12 flex flex-col gap-4"
                 action={async (formData: FormData) => {
                     "use server"
 
@@ -28,7 +29,9 @@ export default function EditConfig() {
                     type="text"
                     placeholder="Enter app name"
                 />
-                <button type="submit">Save</button>
+                <Button type="submit" wide>
+                    Save
+                </Button>
             </form>
         </>
     )

diff --git a/packages/ui/src/components/Button.tsx → packages/ui/src/components/button.tsx b/packages/ui/src/components/Button.tsx → packages/ui/src/components/button.tsx
@@ -5,17 +5,21 @@ interface ButtonProps {
     className?: string
     onClick?: () => void
     type?: "submit" | "button"
+    wide?: boolean
 }
 
 export const Button = ({
     children,
     className,
     onClick,
-    type = "button"
+    type = "button",
+    wide = false
 }: ButtonProps) => {
+    const width = wide ? "w-full" : "w-fit"
+
     return (
         <button
-            className={`inset-shadow-sm inset-shadow-white/20 inset-ring inset-ring-white/15 cursor-pointer rounded-lg bg-green-600 px-2 py-1 text-sm text-white ring ring-green-700 ${className}`}
+            className={`inset-shadow-sm inset-shadow-white/20 inset-ring inset-ring-white/15 inline-block ${width} cursor-pointer rounded-lg bg-green-600 px-2 py-1 text-sm text-white ring ring-green-700 ${className}`}
             onClick={onClick}
             type={type}
         >

diff --git a/packages/ui/src/components/Card.tsx → packages/ui/src/components/card.tsx b/packages/ui/src/components/Card.tsx → packages/ui/src/components/card.tsx