diff --git a/components/FuriganaGenerator/Vocabulary/VocabularyProvider.tsx b/components/FuriganaGenerator/Vocabulary/VocabularyProvider.tsx index 4c2a85b..5d9a0f6 100644 --- a/components/FuriganaGenerator/Vocabulary/VocabularyProvider.tsx +++ b/components/FuriganaGenerator/Vocabulary/VocabularyProvider.tsx @@ -1,5 +1,5 @@ import { EntryFull } from "@components/Dict"; -import { Alert, Button, LoadingProgress } from "@components/ui"; +import { Alert, ButtonLink, LoadingProgress } from "@components/ui"; import ExternalIcon from "@heroicons/react/24/solid/ArrowTopRightOnSquareIcon"; import type { EntryModel, @@ -48,8 +48,7 @@ export function VocabularyProvider({ entry={entry} className="mb-4 p-4 border border-gray-300 dark:border-gray-700 rounded" /> - + )} {error && {error}} diff --git a/components/ui/Box/Box.tsx b/components/ui/Box/Box.tsx deleted file mode 100644 index c30708f..0000000 --- a/components/ui/Box/Box.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React, { createElement, forwardRef } from "react"; - -export type BoxProps = { - as?: E; -} & React.ComponentPropsWithoutRef; - -// eslint-disable-next-line @typescript-eslint/ban-types -export type BoxComponent

= ( - props: P & BoxProps, -) => React.ReactNode | null; - -export const Box = forwardRef(function Box< - E extends React.ElementType = React.ElementType, ->({ as, ...rest }: BoxProps, ref: React.Ref) { - return createElement(as ?? "span", { - ...rest, - ref, - }); -}); diff --git a/components/ui/Box/index.ts b/components/ui/Box/index.ts deleted file mode 100644 index 2a063cc..0000000 --- a/components/ui/Box/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./Box"; diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx index 037ed4b..d7586d4 100644 --- a/components/ui/Button/Button.tsx +++ b/components/ui/Button/Button.tsx @@ -1,11 +1,11 @@ -import React, { forwardRef } from "react"; -import { Box, BoxComponent, BoxProps } from "../Box"; +import { ButtonHTMLAttributes, forwardRef, HTMLProps } from "react"; +import clsx from "clsx"; export type ButtonVariant = "primary" | "default" | "text"; -export type ButtonProps = { +export type ButtonProps = { variant?: ButtonVariant; -} & BoxProps; +} & ButtonHTMLAttributes; const COLOR_MAP: Record = { default: "border-gray-700", @@ -14,16 +14,38 @@ const COLOR_MAP: Record = { "border-primary-700 text-primary-700 hover:bg-primary-700 hover:bg-opacity-20 focus focus:bg-opacity-40", }; -export const Button: BoxComponent = forwardRef(function Button( - { as, className = "", variant = "default", ...rest }, - ref, -) { - return ( - - ); -}); +export const Button = forwardRef( + function Button({ className = "", variant = "default", ...rest }, ref) { + return ( +