Something went wrong. Try again.
[mirror] A local-first desktop markdown writer with grammar checking, at proto integration, and more github.com/stormlightlabs/writer/releases
atproto codemirror markdown tauri rust react
Something went wrong. Try again.
3.1 kB · 72 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273import { cn } from "$utils/tw";import { type ClassValue } from "clsx";import { type ButtonHTMLAttributes, forwardRef } from "react";
export type ButtonVariant = | "unstyled" | "iconGhost" | "iconSubtle" | "outline" | "surface" | "secondary" | "primary" | "primaryBlue" | "link" | "dangerGhost";
export type ButtonSize = "none" | "xs" | "sm" | "md" | "lg" | "iconXs" | "iconSm" | "iconMd" | "iconLg";
const BUTTON_VARIANT_CLASSES: Record<ButtonVariant, ClassValue> = { unstyled: "", iconGhost: "inline-flex items-center justify-center rounded-sm bg-transparent border-none text-[#94979e] hover:bg-surface-bright/40 cursor-pointer transition-colors duration-200", iconSubtle: "inline-flex items-center justify-center rounded border border-stroke-subtle bg-transparent text-icon-secondary hover:text-icon-primary cursor-pointer transition-colors duration-200", outline: "inline-flex items-center justify-center rounded border border-accent-blue/20 bg-transparent text-accent-blue hover:bg-layer-hover-01 cursor-pointer transition-colors duration-200", surface: "inline-flex items-center justify-center rounded border border-stroke-subtle/20 bg-layer-accent-01 text-text-secondary hover:bg-layer-accent-02 hover:text-text-primary cursor-pointer transition-colors duration-200", secondary: "inline-flex items-center justify-center rounded border border-stroke-subtle bg-layer-02 text-text-primary hover:bg-layer-03 cursor-pointer transition-colors duration-200", primary: "inline-flex items-center justify-center rounded border border-accent-blue bg-accent-blue text-white hover:bg-primary-dim active:scale-95 cursor-pointer transition-all duration-200", primaryBlue: "inline-flex items-center justify-center rounded border border-accent-blue bg-accent-blue text-white hover:bg-link-hover cursor-pointer transition-colors duration-200", link: "inline-flex items-center justify-center bg-transparent border-none text-link-primary underline underline-offset-2 cursor-pointer transition-colors duration-200", dangerGhost: "inline-flex items-center justify-center bg-transparent border-none text-support-error cursor-pointer transition-colors duration-200",};
const BUTTON_SIZE_CLASSES: Record<ButtonSize, ClassValue> = { none: "", xs: "px-2 py-1 text-xs", sm: "px-2.5 py-1.5 text-[0.8125rem]", md: "px-3 py-1.5 text-sm", lg: "px-4 py-2 text-sm font-medium", iconXs: "w-4 h-4", iconSm: "w-5 h-5", iconMd: "w-6 h-6", iconLg: "w-7 h-7",};
type TProps = { type?: "button" | "submit" | "reset"; variant?: ButtonVariant; size?: ButtonSize };export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & TProps;
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(( { type = "button", variant = "unstyled", size = "none", className, ...props }, ref,) => ( <button ref={ref} type={type} className={cn( "disabled:cursor-not-allowed disabled:opacity-50", BUTTON_VARIANT_CLASSES[variant], BUTTON_SIZE_CLASSES[size], className, )} {...props} />));
Button.displayName = "Button";