new conf design — button

.vscode/settings.json

@@ -8,5 +8,6 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "tailwindCSS.classFunctions": ["clsx"]
 }

src/app/conf/_design-system/README.md

@@ -0,0 +1 @@
+UI from 2025's designs

src/app/conf/_design-system/anchor.tsx

@@ -0,0 +1,42 @@
+import { ForwardedRef, forwardRef, ReactElement } from "react"
+import NextLink from "next/link"
+import type { LinkProps as NextLinkProps } from "next/link"
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export declare namespace AnchorProps {
+  interface IntrinsicAnchorProps
+    extends React.DetailedHTMLProps<
+      React.AnchorHTMLAttributes<HTMLAnchorElement>,
+      HTMLAnchorElement
+    > {
+    href: `#${string}` | `http${string}`
+  }
+
+  interface InternalAnchorProps extends NextLinkProps {}
+}
+
+export type AnchorProps =
+  | AnchorProps.IntrinsicAnchorProps
+  | AnchorProps.InternalAnchorProps
+
+export const Anchor = forwardRef(function Anchor(
+  props: AnchorProps,
+  ref: ForwardedRef<HTMLAnchorElement>,
+) {
+  return isInternal(props) ? (
+    <NextLink {...props} ref={ref} />
+  ) : (
+    <a ref={ref} rel="noopener noreferrer" target="_blank" {...props} />
+  )
+}) as (props: AnchorProps) => ReactElement
+
+function isInternal(
+  props: AnchorProps,
+): props is AnchorProps.InternalAnchorProps {
+  return (
+    typeof props.href === "object" ||
+    (typeof props.href === "string" &&
+      !props.href.startsWith("http") &&
+      !props.href.startsWith("#"))
+  )
+}

src/app/conf/_design-system/button.tsx

@@ -0,0 +1,92 @@
+import { clsx } from "clsx"
+import { Anchor } from "./anchor"
+
+type Size = "md" | "lg"
+type Variant = "primary" | "secondary"
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export declare namespace ButtonProps {
+  export interface BaseProps {
+    size?: Size
+    variant?: Variant
+  }
+
+  export interface AnchorProps
+    extends BaseProps,
+      React.DetailedHTMLProps<
+        React.AnchorHTMLAttributes<HTMLAnchorElement>,
+        HTMLAnchorElement
+      > {
+    href: string
+    as?: never
+    className?: string
+  }
+
+  export interface ButtonProps
+    extends BaseProps,
+      React.DetailedHTMLProps<
+        React.ButtonHTMLAttributes<HTMLButtonElement>,
+        HTMLButtonElement
+      > {
+    href?: never
+    as?: never
+    className?: string
+    disabled?: boolean
+    type?: "button" | "submit" | "reset"
+    onClick?: React.MouseEventHandler<HTMLButtonElement>
+  }
+
+  /**
+   * Use inside `<summary>` or as visual part of bigger interactive element.
+   * Prefer `a` and `button` Buttons otherwise.
+   */
+  export interface NonInteractiveProps
+    extends BaseProps,
+      React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+    href?: never
+    as: "span" | "div"
+    className?: string
+  }
+}
+
+export type ButtonProps =
+  | ButtonProps.AnchorProps
+  | ButtonProps.ButtonProps
+  | ButtonProps.NonInteractiveProps
+
+export function Button(props: ButtonProps) {
+  const className = clsx(
+    "relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 data-[variant=secondary]:text-neu-900 dark:data-[variant=secondary]:text-neu-0 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90",
+    props.className,
+  )
+
+  const styleAttrs = { "data-size": props.size, "data-variant": props.variant }
+
+  if ("href" in props && typeof props.href === "string") {
+    const { className: _1, size: _2, children, ...rest } = props
+
+    return (
+      <Anchor className={className} {...styleAttrs} {...rest}>
+        {children}
+      </Anchor>
+    )
+  }
+
+  if (props.as) {
+    const { className: _1, size: _2, children, as, ...rest } = props
+    const Root = as as "span" // we don't need HTMLDivElement type
+    return (
+      <Root className={className} {...styleAttrs} {...rest}>
+        {children}
+      </Root>
+    )
+  }
+
+  const { className: _1, size: _2, children, ...rest } = props
+
+  return (
+    <button className={className} {...styleAttrs} {...rest}>
+      {children}
+    </button>
+  )
+}