add welcome page

commafeed-client/src/components/ActionButtton.tsx

@@ -1,12 +1,15 @@
-import { ActionIcon, Button, useMantineTheme } from "@mantine/core"
+import { ActionIcon, Button, ButtonVariant, useMantineTheme } from "@mantine/core"
+import { ActionIconVariant } from "@mantine/core/lib/ActionIcon/ActionIcon.styles"
 import { useMediaQuery } from "@mantine/hooks"
-import { forwardRef } from "react"
+import { forwardRef, MouseEventHandler, ReactNode } from "react"
 
 interface ActionButtonProps {
     className?: string
-    icon?: React.ReactNode
+    icon?: ReactNode
     label?: string
-    onClick?: React.MouseEventHandler
+    onClick?: MouseEventHandler
+    variant?: ActionIconVariant & ButtonVariant
+    showLabelOnMobile?: boolean
 }
 
 /**
@@ -14,13 +17,15 @@ interface ActionButtonProps {
  */
 export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((props: ActionButtonProps, ref) => {
     const theme = useMantineTheme()
+    const variant = props.variant ?? "subtle"
     const mobile = !useMediaQuery(`(min-width: ${theme.breakpoints.lg}px)`)
-    return mobile ? (
-        <ActionIcon ref={ref} color={theme.primaryColor} variant="subtle" className={props.className} onClick={props.onClick}>
+    const iconOnly = !props.showLabelOnMobile && (mobile || !props.label)
+    return iconOnly ? (
+        <ActionIcon ref={ref} color={theme.primaryColor} variant={variant} className={props.className} onClick={props.onClick}>
             {props.icon}
         </ActionIcon>
     ) : (
-        <Button ref={ref} variant="subtle" size="xs" className={props.className} leftIcon={props.icon} onClick={props.onClick}>
+        <Button ref={ref} variant={variant} size="xs" className={props.className} leftIcon={props.icon} onClick={props.onClick}>
             {props.label}
         </Button>
     )