Skip to content

Instantly share code, notes, and snippets.

@asasvirtuais

asasvirtuais/park-ui.button.tsx

Last active August 8, 2024 21:43
Download ZIP

Revisions

  1. asasvirtuais revised this gist Aug 8, 2024. No changes.
  2. asasvirtuais revised this gist Aug 3, 2024. 2 changed files with 2 additions and 0 deletions.
    1 change: 1 addition & 0 deletions park-ui.button.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    /** @src https://github.com/cschroeter/park-ui/blob/main/components/react/src/components/ui/button.tsx */
    import { forwardRef } from 'react'
    import { Center, styled } from 'styled-system/jsx'
    import { Spinner } from './spinner'
    1 change: 1 addition & 0 deletions shadcn-ui.default.button.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    /** @src https://github.com/shadcn-ui/ui/blob/main/apps/www/__registry__/default/ui/button.tsx */
    import * as React from "react"
    import { Slot } from "@radix-ui/react-slot"
    import { cva, type VariantProps } from "class-variance-authority"
  3. asasvirtuais revised this gist Aug 3, 2024. No changes.
  4. asasvirtuais created this gist Aug 3, 2024.
    40 changes: 40 additions & 0 deletions park-ui.button.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    import { forwardRef } from 'react'
    import { Center, styled } from 'styled-system/jsx'
    import { Spinner } from './spinner'
    import { Button as StyledButton, type ButtonProps as StyledButtonProps } from './styled/button'

    interface ButtonLoadingProps {
    loading?: boolean
    loadingText?: React.ReactNode
    }

    export interface ButtonProps extends StyledButtonProps, ButtonLoadingProps {}

    export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
    const { loading, disabled, loadingText, children, ...rest } = props

    const trulyDisabled = loading || disabled

    return (
    <StyledButton disabled={trulyDisabled} ref={ref} {...rest}>
    {loading && !loadingText ? (
    <>
    <ButtonSpinner />
    <styled.span opacity={0}>{children}</styled.span>
    </>
    ) : loadingText ? (
    loadingText
    ) : (
    children
    )}
    </StyledButton>
    )
    })

    Button.displayName = 'Button'

    const ButtonSpinner = () => (
    <Center inline position="absolute" transform="translate(-50%, -50%)" top="50%" insetStart="50%">
    <Spinner colorPalette="gray" />
    </Center>
    )
    56 changes: 56 additions & 0 deletions shadcn-ui.default.button.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    import * as React from "react"
    import { Slot } from "@radix-ui/react-slot"
    import { cva, type VariantProps } from "class-variance-authority"

    import { cn } from "@/lib/utils"

    const buttonVariants = cva(
    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
    {
    variants: {
    variant: {
    default: "bg-primary text-primary-foreground hover:bg-primary/90",
    destructive:
    "bg-destructive text-destructive-foreground hover:bg-destructive/90",
    outline:
    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
    secondary:
    "bg-secondary text-secondary-foreground hover:bg-secondary/80",
    ghost: "hover:bg-accent hover:text-accent-foreground",
    link: "text-primary underline-offset-4 hover:underline",
    },
    size: {
    default: "h-10 px-4 py-2",
    sm: "h-9 rounded-md px-3",
    lg: "h-11 rounded-md px-8",
    icon: "h-10 w-10",
    },
    },
    defaultVariants: {
    variant: "default",
    size: "default",
    },
    }
    )

    export interface ButtonProps
    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
    asChild?: boolean
    }

    const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
    ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
    <Comp
    className={cn(buttonVariants({ variant, size, className }))}
    ref={ref}
    {...props}
    />
    )
    }
    )
    Button.displayName = "Button"

    export { Button, buttonVariants }