creating reusable components (#655)

* wip: Introduce FormInput and Badge components; refactor existing components to use them

* feat: Replace status indicators with Badge component in submissions and users

* feat: Replace input fields with FormInput component in moderation and feedback sections

* feat: Replace button elements with Button component in various pages

* feat: Add Button component with customizable styles and variants

* Change ui.dev to Fireship (#654)

* change ui.dev to Fireship

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

* wip: Introduce FormInput and Badge components; refactor existing components to use them

* Change ui.dev to Fireship (#654)

* change ui.dev to Fireship

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

* wip: Introduce FormInput and Badge components; refactor existing components to use them

* Change ui.dev to Fireship (#654)

* change ui.dev to Fireship

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

* ci: apply automated fixes

---------

Co-authored-by: Lynn Fisher <[email protected]>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

src/components/AvatarCropModal.tsx

@@ -3,6 +3,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog'
 import Cropper from 'react-easy-crop'
 import type { Area, Point } from 'react-easy-crop'
 import { X } from 'lucide-react'
+import { Button } from '~/ui'
 
 interface AvatarCropModalProps {
   open: boolean
@@ -153,21 +154,20 @@ export function AvatarCropModal({
           </div>
 
           <div className="mt-6 flex gap-3 justify-end">
-            <button
-              type="button"
+            <Button
+              variant="secondary"
+              size="sm"
               onClick={() => onOpenChange(false)}
-              className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
             >
               Cancel
-            </button>
-            <button
-              type="button"
+            </Button>
+            <Button
+              size="sm"
               onClick={handleSave}
               disabled={isProcessing || !croppedAreaPixels}
-              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors"
             >
               {isProcessing ? 'Processing...' : 'Save'}
-            </button>
+            </Button>
           </div>
         </DialogPrimitive.Content>
       </DialogPrimitive.Portal>

src/components/BottomCTA.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import type { LinkProps } from '@tanstack/react-router'
 import { Link } from '@tanstack/react-router'
-import { Button } from './Button'
+import { Button } from '~/ui'
 
 type BottomCTAProps = {
   linkProps: Omit<LinkProps, 'className' | 'children'>

src/components/Button.tsx

@@ -1,6 +1,6 @@
 import { Link } from '@tanstack/react-router'
 import { useEffect, useState } from 'react'
-import { Button } from './Button'
+import { Button } from '~/ui'
 
 declare global {
   interface Window {
@@ -184,22 +184,13 @@ export default function CookieConsent() {
             for details.
           </span>
           <div className="flex gap-2 flex-wrap items-center">
-            <Button
-              onClick={rejectAllCookies}
-              className="bg-rose-500 border-rose-500 hover:bg-rose-600 text-white"
-            >
+            <Button color="red" onClick={rejectAllCookies}>
               Reject All
             </Button>
-            <Button
-              onClick={openSettings}
-              className="bg-gray-500 border-gray-500 hover:bg-gray-600 text-white"
-            >
+            <Button color="gray" onClick={openSettings}>
               Customize
             </Button>
-            <Button
-              onClick={acceptAllCookies}
-              className="bg-emerald-500 border-emerald-500 hover:bg-emerald-600 text-white"
-            >
+            <Button color="emerald" onClick={acceptAllCookies}>
               Accept All
             </Button>
           </div>
@@ -264,10 +255,7 @@ export default function CookieConsent() {
                 </label>
               </div>
               <div className="mt-6">
-                <Button
-                  onClick={closeSettings}
-                  className="bg-emerald-500 border-emerald-500 hover:bg-emerald-600 text-white"
-                >
+                <Button color="emerald" onClick={closeSettings}>
                   Save
                 </Button>
               </div>

src/components/CookieConsent.tsx

@@ -4,7 +4,7 @@ import { useState, useTransition } from 'react'
 import { type MouseEventHandler, useEffect, useRef } from 'react'
 import { useToast } from '~/components/ToastProvider'
 import { Check, Copy } from 'lucide-react'
-import { Button } from './Button'
+import { Button } from '~/ui'
 
 export function useCopyButton(
   onCopy: () => void | Promise<void>,

src/components/CopyMarkdownButton.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react'
 import { ChevronDown, Copy, Check } from 'lucide-react'
 import { useToast } from '~/components/ToastProvider'
-import { Button } from './Button'
+import { Button } from '~/ui'
 import { ButtonGroup } from './ButtonGroup'
 import {
   Dropdown,
@@ -242,7 +242,13 @@ export function CopyPageDropdown({
 
   return (
     <ButtonGroup>
-      <Button className="border-0 rounded-none" onClick={handleCopyPage}>
+      <Button
+        variant="ghost"
+        size="xs"
+        rounded="none"
+        className="border-0"
+        onClick={handleCopyPage}
+      >
         {copied ? (
           <>
             <Check className="w-3 h-3" />
@@ -257,7 +263,12 @@ export function CopyPageDropdown({
       </Button>
       <Dropdown open={open} onOpenChange={setOpen}>
         <DropdownTrigger>
-          <Button className="border-0 rounded-none px-1.5">
+          <Button
+            variant="ghost"
+            size="xs"
+            rounded="none"
+            className="border-0 px-1.5"
+          >
             <ChevronDown className="w-3 h-3" />
           </Button>
         </DropdownTrigger>

src/components/CopyPageDropdown.tsx

@@ -8,7 +8,7 @@ import {
 } from '@tanstack/react-router'
 import * as Sentry from '@sentry/tanstackstart-react'
 
-import { Button } from './Button'
+import { Button } from '~/ui'
 import { useEffect } from 'react'
 
 // type DefaultCatchBoundaryType = {
@@ -67,26 +67,20 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
       <ErrorComponent error={error} />
       <div className="flex gap-2 items-center flex-wrap">
         <Button
+          color="gray"
           onClick={() => {
             router.invalidate()
           }}
-          className="bg-gray-600 border-gray-600 hover:bg-gray-700 text-white"
         >
           Try Again
         </Button>
         {isRoot ? (
-          <Button
-            as={Link}
-            to="/"
-            className="bg-gray-600 border-gray-600 hover:bg-gray-700 text-white"
-          >
+          <Button as={Link} to="/" color="gray">
             TanStack Home
           </Button>
         ) : (
           <Button
-            as={Link}
-            to="/"
-            className="bg-gray-600 border-gray-600 hover:bg-gray-700 text-white"
+            color="gray"
             onClick={(e: React.MouseEvent) => {
               e.preventDefault()
               window.history.back()

src/components/DefaultCatchBoundary.tsx

@@ -1,4 +1,4 @@
-import { LogoQueryGGSmall } from '~/components/LogoQueryGGSmall'
+import { LogoQueryGG } from '~/ui'
 import { useQueryGGPPPDiscount } from '~/hooks/useQueryGGPPPDiscount'
 
 export function DocsCalloutQueryGG() {
@@ -15,7 +15,7 @@ export function DocsCalloutQueryGG() {
         <h6 className="text-[.7rem] uppercase font-black opacity-50">
           Want to Skip the Docs?
         </h6>
-        <LogoQueryGGSmall className="w-full" />
+        <LogoQueryGG size="small" className="w-full" />
 
         <blockquote className="text-sm -indent-[.45em] pl-2">
           “If you’re serious about *really* understanding React Query, there’s

src/components/DocsCalloutQueryGG.tsx

@@ -16,6 +16,7 @@ import type { DocFeedback } from '~/db/types'
 import { calculatePoints } from '~/utils/docFeedback.client'
 import { Check, Lightbulb, TriangleAlert } from 'lucide-react'
 import { MessageSquare, X } from 'lucide-react'
+import { Badge, Button } from '~/ui'
 
 interface FeedbackModerationListProps {
   data:
@@ -192,20 +193,18 @@ export function FeedbackModerationList({
                     </Link>
                   </TableCell>
                   <TableCell>
-                    <span
-                      className={twMerge(
-                        'px-2 py-1 text-xs font-medium rounded-full',
-                        feedback.status === 'pending' &&
-                          'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
-                        feedback.status === 'approved' &&
-                          'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
-                        feedback.status === 'denied' &&
-                          'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
-                      )}
+                    <Badge
+                      variant={
+                        feedback.status === 'pending'
+                          ? 'warning'
+                          : feedback.status === 'approved'
+                            ? 'success'
+                            : 'error'
+                      }
                     >
                       {feedback.status.charAt(0).toUpperCase() +
                         feedback.status.slice(1)}
-                    </span>
+                    </Badge>
                   </TableCell>
                   <TableCell>
                     <div>
@@ -238,20 +237,24 @@ export function FeedbackModerationList({
                   <TableCell onClick={(e) => e.stopPropagation()}>
                     {isPending && !isModeratingThis && (
                       <div className="flex gap-2">
-                        <button
+                        <Button
+                          variant="icon"
+                          color="green"
+                          size="icon-sm"
                           onClick={() => handleModerate(feedback.id, 'approve')}
-                          className="px-3 py-1 text-xs font-medium text-white bg-green-600 hover:bg-green-700 rounded transition-colors"
                           title="Approve"
                         >
                           <Check />
-                        </button>
-                        <button
+                        </Button>
+                        <Button
+                          variant="icon"
+                          color="red"
+                          size="icon-sm"
                           onClick={() => handleModerate(feedback.id, 'deny')}
-                          className="px-3 py-1 text-xs font-medium text-white bg-red-600 hover:bg-red-700 rounded transition-colors"
                           title="Deny"
                         >
                           <X />
-                        </button>
+                        </Button>
                       </div>
                     )}
                     {isModeratingThis && (

src/components/FeedbackModerationList.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { libraries } from '~/libraries'
 import { DOC_FEEDBACK_STATUSES, type DocFeedbackStatus } from '~/db/types'
 import {
@@ -9,6 +8,7 @@ import {
   FilterCheckbox,
   getFilterChipLabel,
 } from '~/components/FilterComponents'
+import { FormInput } from '~/ui'
 
 interface FeedbackModerationTopBarProps {
   filters: {
@@ -169,14 +169,14 @@ export function FeedbackModerationTopBar({
               >
                 From
               </label>
-              <input
+              <FormInput
                 id="from"
                 type="date"
                 value={filters.dateFrom || ''}
                 onChange={(e) =>
                   onFilterChange({ dateFrom: e.target.value || undefined })
                 }
-                className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="text-sm"
               />
             </div>
             <div>
@@ -186,14 +186,14 @@ export function FeedbackModerationTopBar({
               >
                 To
               </label>
-              <input
+              <FormInput
                 id="to"
                 type="date"
                 value={filters.dateTo || ''}
                 onChange={(e) =>
                   onFilterChange({ dateTo: e.target.value || undefined })
                 }
-                className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="text-sm"
               />
             </div>
           </div>