feat: create shared button component

app/components/Action.tsx

@@ -1,25 +0,0 @@
-import clsx from 'clsx'
-import { type HTMLProps } from 'react'
-
-type Properties = HTMLProps<HTMLButtonElement> & {
-	readonly isDestructive?: boolean;
-	readonly isDisabled?: boolean;
-}
-
-export default function Action(properties: Properties) {
-	return (
-		<button
-			{...properties}
-			type='button'
-			className={clsx(
-				properties.className,
-				properties.isDisabled && 'opacity-50 cursor-not-allowed',
-				properties.isDestructive
-					? 'text-red-700 dark:text-red-500'
-					: 'text-blue-700 dark:text-blue-400'
-			)}
-		>
-			{properties.children}
-		</button>
-	)
-}

app/components/Button.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx'
+import { type ButtonHTMLAttributes, type DetailedHTMLProps } from 'react'
+
+type Properties = {
+	readonly variant?: 'emphasized' | 'normal' | 'destructive';
+} & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+
+export default function Action(properties: Properties) {
+	return (
+		<button
+			type='button'
+			{...properties}
+			className={clsx(
+				'focus:outline-none focus:ring focus:ring-1',
+				'focus:ring-blue-500 dark:focus:ring-blue-300',
+				properties.className,
+				properties.disabled && 'opacity-50 cursor-not-allowed',
+				properties.variant === 'destructive' ? 'text-red-700 dark:text-red-500' : '',
+				properties.variant === 'emphasized' ? 'rounded-lg px-4 py-2 bg-gray-800 dark:bg-gray-700 text-white' : '',
+				!properties.variant || properties.variant === 'normal' ? 'text-blue-700 dark:text-blue-400' : ''
+			)}
+		>
+			{properties.children}
+		</button>
+	)
+}

app/components/Input.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx'
 import { type DetailedHTMLProps, type InputHTMLAttributes } from 'react'
 
 type Properties = {
-	readonly isEmbedded?: boolean;
+	readonly variant?: 'embedded' | 'normal';
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
 
 export default function Input(properties: Properties) {
@@ -14,11 +14,11 @@ export default function Input(properties: Properties) {
 				'border-gray-300 dark:border-zinc-700',
 				'focus:outline-none focus:ring',
 				'focus:ring-blue-500 dark:focus:ring-blue-300',
-				properties.isEmbedded ? 'bg-transparent' : 'dark:bg-zinc-800',
-				properties.isEmbedded ? 'p-0' : 'px-2.5 py-1.5',
-				properties.isEmbedded ? 'border-none' : 'border',
-				properties.isEmbedded ? 'focus:ring-0' : 'focus:ring-1',
-				properties.isEmbedded ? 'rounded-none' : 'rounded-lg',
+				properties.variant === 'embedded' ? 'bg-transparent' : 'dark:bg-zinc-800',
+				properties.variant === 'embedded' ? 'p-0' : 'px-2.5 py-1.5',
+				properties.variant === 'embedded' ? 'border-none' : 'border',
+				properties.variant === 'embedded' ? 'focus:ring-0' : 'focus:ring-1',
+				properties.variant === 'embedded' ? 'rounded-none' : 'rounded-lg',
 				properties.className
 			)}
 		/>