From 052752820ed65fda9d432db82e83c25510baa61c Mon Sep 17 00:00:00 2001 From: "Duy K. Bui" Date: Sun, 25 Sep 2022 21:57:26 -0400 Subject: [PATCH] refactor: better prop mapping --- components/Button.tsx | 22 ++++++++++++---------- components/Page.tsx | 37 ++++++++++++++++++++++--------------- 2 files changed, 34 insertions(+), 25 deletions(-) diff --git a/components/Button.tsx b/components/Button.tsx index bfb7e7f..dd67ec5 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -1,4 +1,4 @@ -import { ComponentChildren, JSX } from "preact"; +import { JSX } from "preact"; import { IS_BROWSER } from "$fresh/runtime.ts"; enum ButtonVariants { @@ -11,14 +11,16 @@ enum ButtonVariants { yellow, purple, } + export type ButtonProps = JSX.HTMLAttributes & { - extraClass?: string; variant?: keyof typeof ButtonVariants; }; -export default function Button({ extraClass, variant, ...props }: ButtonProps) { - const classNames = [ - extraClass ?? "", +export default function Button( + { class: extraClass = "", disabled, variant = "default", ...props }: + ButtonProps, +) { + const commonClassNames = [ "focus:(ring-4 outline-none)", "font-medium", "rounded-lg", @@ -90,16 +92,16 @@ export default function Button({ extraClass, variant, ...props }: ButtonProps) { "dark:(bg-purple-600 hover:bg-purple-700 focus:ring-purple-900)", ], }; - const variantEnum = ButtonVariants[variant ?? "default"]; - const finalClassNames = classNames.concat( - extraClassNamesByVariant[variantEnum], + const classNames = commonClassNames.concat( + extraClassNamesByVariant[ButtonVariants[variant]], + [extraClass], ); return (