@@ -362,26 +361,33 @@ export function ShowcaseModerationList({
) : (
{showcase.status !== 'approved' && (
-
+
)}
{showcase.status !== 'denied' && (
-
+
)}
-
+
)}
@@ -575,7 +580,7 @@ export function ShowcaseModerationList({
)}
-
+
)
})}
diff --git a/src/components/ShowcaseSection.tsx b/src/components/ShowcaseSection.tsx
index a768e7201..0ab0485af 100644
--- a/src/components/ShowcaseSection.tsx
+++ b/src/components/ShowcaseSection.tsx
@@ -8,7 +8,7 @@ import {
} from '~/queries/showcases'
import { voteShowcase } from '~/utils/showcase.functions'
import { ShowcaseCard, ShowcaseCardSkeleton } from './ShowcaseCard'
-import { buttonStyles } from './Button'
+import { Button } from '~/ui'
import { ArrowRight, Plus } from 'lucide-react'
import { useCurrentUser } from '~/hooks/useCurrentUser'
import { useLoginModal } from '~/contexts/LoginModalContext'
@@ -232,13 +232,11 @@ export function ShowcaseSection({
{showViewAll && (
-
- View all projects
-
+
+
)}
diff --git a/src/components/ShowcaseSubmitForm.tsx b/src/components/ShowcaseSubmitForm.tsx
index 6ad3a6c2f..e98b20faa 100644
--- a/src/components/ShowcaseSubmitForm.tsx
+++ b/src/components/ShowcaseSubmitForm.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react'
import { useMutation } from '@tanstack/react-query'
import { useNavigate } from '@tanstack/react-router'
import { submitShowcase, updateShowcase } from '~/utils/showcase.functions'
@@ -14,8 +13,9 @@ import {
} from '~/utils/showcase.client'
import { useToast } from './ToastProvider'
import { Check, AlertCircle } from 'lucide-react'
-import { Button } from './Button'
+import { Button, FormInput } from '~/ui'
import { ImageUpload } from './ImageUpload'
+import { FormEvent, useMemo, useState } from 'react'
// Filter to only show libraries with proper configuration
const selectableLibraries = libraries.filter(
@@ -32,29 +32,27 @@ export function ShowcaseSubmitForm({ showcase }: ShowcaseSubmitFormProps) {
const { notify } = useToast()
const isEditMode = !!showcase
- const [name, setName] = React.useState(showcase?.name ?? '')
- const [tagline, setTagline] = React.useState(showcase?.tagline ?? '')
- const [description, setDescription] = React.useState(
- showcase?.description ?? '',
- )
- const [url, setUrl] = React.useState(showcase?.url ?? '')
- const [logoUrl, setLogoUrl] = React.useState
(
+ const [name, setName] = useState(showcase?.name ?? '')
+ const [tagline, setTagline] = useState(showcase?.tagline ?? '')
+ const [description, setDescription] = useState(showcase?.description ?? '')
+ const [url, setUrl] = useState(showcase?.url ?? '')
+ const [logoUrl, setLogoUrl] = useState(
showcase?.logoUrl ?? undefined,
)
- const [screenshotUrl, setScreenshotUrl] = React.useState(
+ const [screenshotUrl, setScreenshotUrl] = useState(
showcase?.screenshotUrl ?? undefined,
)
- const [selectedLibraries, setSelectedLibraries] = React.useState(
+ const [selectedLibraries, setSelectedLibraries] = useState(
showcase?.libraries ?? [],
)
- const [selectedUseCases, setSelectedUseCases] = React.useState<
- ShowcaseUseCase[]
- >(showcase?.useCases ?? [])
- const [isOpenSource, setIsOpenSource] = React.useState(!!showcase?.sourceUrl)
- const [sourceUrl, setSourceUrl] = React.useState(showcase?.sourceUrl ?? '')
+ const [selectedUseCases, setSelectedUseCases] = useState(
+ showcase?.useCases ?? [],
+ )
+ const [isOpenSource, setIsOpenSource] = useState(!!showcase?.sourceUrl)
+ const [sourceUrl, setSourceUrl] = useState(showcase?.sourceUrl ?? '')
// Get auto-included libraries based on selection
- const autoIncluded = React.useMemo(
+ const autoIncluded = useMemo(
() => getAutoIncludedLibraries(selectedLibraries),
[selectedLibraries],
)
@@ -121,7 +119,7 @@ export function ShowcaseSubmitForm({ showcase }: ShowcaseSubmitFormProps) {
)
}
- const handleSubmit = (e: React.FormEvent) => {
+ const handleSubmit = (e: FormEvent) => {
e.preventDefault()
if (selectedLibraries.length === 0) {
@@ -207,14 +205,14 @@ export function ShowcaseSubmitForm({ showcase }: ShowcaseSubmitFormProps) {
>
Project Name *
- setName(e.target.value)}
required
maxLength={255}
- className="mt-1 block w-full px-4 py-3 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="mt-1 px-4 py-3"
placeholder="My Awesome App"
/>
@@ -323,13 +321,13 @@ export function ShowcaseSubmitForm({ showcase }: ShowcaseSubmitFormProps) {
>
Source Code URL *
- setSourceUrl(e.target.value)}
required
- className="mt-1 block w-full px-4 py-3 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="mt-1 px-4 py-3"
placeholder="https://github.com/username/repo"
/>
diff --git a/src/components/SimpleMarkdown.tsx b/src/components/SimpleMarkdown.tsx
index 3a3e019ac..d30dc53ea 100644
--- a/src/components/SimpleMarkdown.tsx
+++ b/src/components/SimpleMarkdown.tsx
@@ -8,7 +8,7 @@ import parse, {
HTMLReactParserOptions,
} from 'html-react-parser'
import { renderMarkdown } from '~/utils/markdown'
-import { getNetlifyImageUrl } from '~/utils/netlifyImage'
+import { InlineCode, MarkdownImg } from '~/ui'
/**
* Lightweight markdown renderer for simple content like excerpts.
@@ -18,16 +18,7 @@ import { getNetlifyImageUrl } from '~/utils/netlifyImage'
const markdownComponents: Record> = {
a: MarkdownLink,
- code: function Code({ className, ...rest }: HTMLProps) {
- return (
-
- )
- },
+ code: InlineCode,
pre: function Pre({ children, ...rest }: HTMLProps) {
return (
> = {
)
},
- img: ({
- alt,
- src,
- className,
- children: _,
- ...props
- }: HTMLProps) => (
- 
- ),
+ img: MarkdownImg,
}
const options: HTMLReactParserOptions = {
diff --git a/src/components/SponsorsSection.tsx b/src/components/SponsorsSection.tsx
index bc681b545..837466dce 100644
--- a/src/components/SponsorsSection.tsx
+++ b/src/components/SponsorsSection.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
import { Await } from '@tanstack/react-router'
import { Spinner } from '~/components/Spinner'
import SponsorPack from '~/components/SponsorPack'
-import { Button } from '~/components/Button'
+import { Button } from '~/ui'
import { twMerge } from 'tailwind-merge'
type SponsorsSectionProps = {
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index 2b3bad032..a0e894a08 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import { useTheme } from './ThemeProvider'
import { Moon, Sun, SunMoon } from 'lucide-react'
-import { Button } from './Button'
+import { Button } from '~/ui'
export function ThemeToggle() {
const { themeMode, toggleMode } = useTheme()
@@ -16,7 +16,7 @@ export function ThemeToggle() {
themeMode === 'auto' ? 'Auto' : themeMode === 'light' ? 'Light' : 'Dark'
return (
-
-
@@ -217,11 +209,10 @@ export function FeedEntryEditor({
- setTitle(e.target.value)}
- className={inputClass}
placeholder="Enter a descriptive title"
/>
@@ -255,7 +246,7 @@ export function FeedEntryEditor({
value={excerpt}
onChange={(e) => setExcerpt(e.target.value)}
rows={2}
- className={inputClass}
+ className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
placeholder="Brief summary for feed previews"
/>
@@ -266,11 +257,10 @@ export function FeedEntryEditor({
Published Date *
- setPublishedAt(e.target.value)}
- className={inputClass}
/>
@@ -366,11 +356,10 @@ export function FeedEntryEditor({
(comma-separated)
- setTags(e.target.value)}
- className={inputClass}
placeholder="e.g., release:major, breaking-change"
/>
diff --git a/src/components/admin/FeedSyncStatus.tsx b/src/components/admin/FeedSyncStatus.tsx
index ec3cd52cf..6d13f3841 100644
--- a/src/components/admin/FeedSyncStatus.tsx
+++ b/src/components/admin/FeedSyncStatus.tsx
@@ -8,6 +8,7 @@ import {
} from '~/utils/admin'
import { Spinner } from '~/components/Spinner'
import { RefreshCw } from 'lucide-react'
+import { Button } from '~/ui'
export function FeedSyncStatus({
onSyncComplete,
@@ -63,10 +64,10 @@ export function FeedSyncStatus({
Sync Status
-
+
diff --git a/src/components/admin/StatusBadge.tsx b/src/components/admin/StatusBadge.tsx
index 4c527f589..25489a76e 100644
--- a/src/components/admin/StatusBadge.tsx
+++ b/src/components/admin/StatusBadge.tsx
@@ -1,47 +1,38 @@
-import { twMerge } from 'tailwind-merge'
+import { Badge } from '~/ui'
type StatusBadgeProps = {
status: string
className?: string
}
-const statusStyles: Record = {
+const statusVariants: Record<
+ string,
+ 'success' | 'warning' | 'error' | 'info' | 'default'
+> = {
// Approval statuses
- approved:
- 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
- pending:
- 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
- denied: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
+ approved: 'success',
+ pending: 'warning',
+ denied: 'error',
// Active/Inactive
- active:
- 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
- inactive: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+ active: 'success',
+ inactive: 'default',
// Boolean states
- true: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
- false: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+ true: 'success',
+ false: 'default',
// OAuth providers
- github: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
- google: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
+ github: 'default',
+ google: 'info',
}
-const defaultStyle =
- 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
-
export function StatusBadge({ status, className }: StatusBadgeProps) {
- const style = statusStyles[status.toLowerCase()] || defaultStyle
+ const variant = statusVariants[status.toLowerCase()] || 'default'
return (
-
+
{status}
-
+
)
}
diff --git a/src/components/landing/ConfigLanding.tsx b/src/components/landing/ConfigLanding.tsx
index 6cdd0d75a..7e2fc16d9 100644
--- a/src/components/landing/ConfigLanding.tsx
+++ b/src/components/landing/ConfigLanding.tsx
@@ -6,7 +6,7 @@ import { configProject } from '~/libraries/config'
import { getLibrary } from '~/libraries'
import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
import LandingPageGad from '~/components/LandingPageGad'
-import { Button } from '~/components/Button'
+import { Button } from '~/ui'
import { PartnersSection } from '~/components/PartnersSection'
import { MaintainersSection } from '~/components/MaintainersSection'
import { CheckCircleIcon } from '~/components/icons/CheckCircleIcon'
diff --git a/src/components/landing/McpLanding.tsx b/src/components/landing/McpLanding.tsx
index c9cfb3dd4..801d9fcaa 100644
--- a/src/components/landing/McpLanding.tsx
+++ b/src/components/landing/McpLanding.tsx
@@ -7,7 +7,7 @@ import { mcpProject } from '~/libraries/mcp'
import { getLibrary } from '~/libraries'
import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
import LandingPageGad from '~/components/LandingPageGad'
-import { Button } from '~/components/Button'
+import { Button } from '~/ui'
import { MaintainersSection } from '~/components/MaintainersSection'
import { LibraryPageContainer } from '~/components/LibraryPageContainer'
import { Key } from 'lucide-react'
@@ -23,11 +23,7 @@ export default function McpLanding() {
project={mcpProject}
actions={
<>
-
) : (
No partners to display.
diff --git a/src/ui/Badge.tsx b/src/ui/Badge.tsx
new file mode 100644
index 000000000..f97ba812f
--- /dev/null
+++ b/src/ui/Badge.tsx
@@ -0,0 +1,50 @@
+import { twMerge } from 'tailwind-merge'
+
+type BadgeVariant =
+ | 'default'
+ | 'success'
+ | 'warning'
+ | 'error'
+ | 'info'
+ | 'purple'
+ | 'teal'
+ | 'orange'
+
+type BadgeProps = {
+ children: React.ReactNode
+ variant?: BadgeVariant
+ className?: string
+}
+
+const variantStyles: Record = {
+ default: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+ success:
+ 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
+ warning:
+ 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
+ error: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
+ info: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
+ purple:
+ 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
+ teal: 'bg-teal-100 text-teal-800 dark:bg-teal-900/30 dark:text-teal-300',
+ orange:
+ 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300',
+}
+
+export function Badge({
+ children,
+ variant = 'default',
+ className,
+}: BadgeProps) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/ui/Button.tsx b/src/ui/Button.tsx
new file mode 100644
index 000000000..968ca934a
--- /dev/null
+++ b/src/ui/Button.tsx
@@ -0,0 +1,141 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'icon'
+
+type ButtonColor =
+ | 'blue'
+ | 'green'
+ | 'red'
+ | 'orange'
+ | 'purple'
+ | 'gray'
+ | 'emerald'
+ | 'cyan'
+ | 'yellow'
+
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon-sm' | 'icon-md'
+
+type ButtonRounded = 'none' | 'md' | 'lg' | 'full'
+
+type ButtonOwnProps = {
+ as?: TElement
+ children: React.ReactNode
+ variant?: ButtonVariant
+ color?: ButtonColor
+ size?: ButtonSize
+ rounded?: ButtonRounded
+ className?: string
+}
+
+type ButtonProps =
+ ButtonOwnProps &
+ Omit<
+ React.ComponentPropsWithoutRef,
+ keyof ButtonOwnProps
+ >
+
+type ButtonComponent = (
+ props: ButtonProps,
+) => React.ReactNode
+
+const primaryColorStyles: Record = {
+ blue: 'bg-blue-600 text-white border-blue-600 hover:bg-blue-700',
+ green: 'bg-green-600 text-white border-green-600 hover:bg-green-700',
+ red: 'bg-red-600 text-white border-red-600 hover:bg-red-700',
+ orange: 'bg-orange-600 text-white border-orange-600 hover:bg-orange-700',
+ purple: 'bg-purple-600 text-white border-purple-600 hover:bg-purple-700',
+ gray: 'bg-gray-600 text-white border-gray-600 hover:bg-gray-700',
+ emerald: 'bg-emerald-500 text-white border-emerald-500 hover:bg-emerald-600',
+ cyan: 'bg-cyan-500 text-white border-cyan-500 hover:bg-cyan-600',
+ yellow: 'bg-yellow-400 text-black border-yellow-400 hover:bg-yellow-500',
+}
+
+const iconColorStyles: Record = {
+ blue: 'text-blue-600 hover:bg-blue-100 dark:hover:bg-blue-900/30',
+ green: 'text-green-600 hover:bg-green-100 dark:hover:bg-green-900/30',
+ red: 'text-red-600 hover:bg-red-100 dark:hover:bg-red-900/30',
+ orange: 'text-orange-600 hover:bg-orange-100 dark:hover:bg-orange-900/30',
+ purple: 'text-purple-600 hover:bg-purple-100 dark:hover:bg-purple-900/30',
+ gray: 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700',
+ emerald: 'text-emerald-600 hover:bg-emerald-100 dark:hover:bg-emerald-900/30',
+ cyan: 'text-cyan-600 hover:bg-cyan-100 dark:hover:bg-cyan-900/30',
+ yellow: 'text-yellow-600 hover:bg-yellow-100 dark:hover:bg-yellow-900/30',
+}
+
+const variantStyles: Record = {
+ primary: 'border font-medium',
+ secondary:
+ 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 border-transparent font-medium',
+ ghost:
+ 'border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 font-medium',
+ icon: 'border-transparent',
+}
+
+const sizeStyles: Record = {
+ xs: 'px-2 py-1.5 text-xs',
+ sm: 'px-3 py-1 text-sm',
+ md: 'px-4 py-2 text-sm',
+ lg: 'px-6 py-3 text-base',
+ 'icon-sm': 'p-1.5',
+ 'icon-md': 'p-2',
+}
+
+const roundedStyles: Record = {
+ none: 'rounded-none',
+ md: 'rounded-md',
+ lg: 'rounded-lg',
+ full: 'rounded-full',
+}
+
+const baseStyles =
+ 'inline-flex items-center justify-center gap-2 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed'
+
+function getDefaultSize(variant: ButtonVariant): ButtonSize {
+ if (variant === 'icon') return 'icon-md'
+ return 'md'
+}
+
+function getDefaultRounded(size: ButtonSize): ButtonRounded {
+ if (size === 'xs' || size === 'sm') return 'md'
+ if (size === 'icon-sm' || size === 'icon-md') return 'lg'
+ return 'lg'
+}
+
+export const Button: ButtonComponent = ({
+ as,
+ children,
+ variant = 'primary',
+ color = 'blue',
+ size,
+ rounded,
+ className,
+ ...props
+}) => {
+ const Component = as || 'button'
+ const resolvedSize = size ?? getDefaultSize(variant)
+ const resolvedRounded = rounded ?? getDefaultRounded(resolvedSize)
+
+ const colorStyles =
+ variant === 'primary'
+ ? primaryColorStyles[color]
+ : variant === 'icon'
+ ? iconColorStyles[color]
+ : ''
+
+ return React.createElement(
+ Component,
+ {
+ className: twMerge(
+ baseStyles,
+ variantStyles[variant],
+ sizeStyles[resolvedSize],
+ roundedStyles[resolvedRounded],
+ colorStyles,
+ className,
+ ),
+ ...props,
+ },
+ children,
+ )
+}
diff --git a/src/ui/FormInput.tsx b/src/ui/FormInput.tsx
new file mode 100644
index 000000000..7996cdab8
--- /dev/null
+++ b/src/ui/FormInput.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type FormInputProps = React.InputHTMLAttributes & {
+ /** Ring color on focus. Defaults to blue. */
+ focusRing?: 'blue' | 'orange' | 'purple'
+}
+
+const ringStyles = {
+ blue: 'focus:ring-blue-500',
+ orange: 'focus:ring-orange-500',
+ purple: 'focus:ring-purple-500',
+}
+
+export const FormInput = React.forwardRef(
+ function FormInput({ className, focusRing = 'blue', ...props }, ref) {
+ return (
+
+ )
+ },
+)
diff --git a/src/ui/InlineCode.tsx b/src/ui/InlineCode.tsx
new file mode 100644
index 000000000..9e0dfa9a6
--- /dev/null
+++ b/src/ui/InlineCode.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+import type { HTMLProps } from 'react'
+
+export const InlineCode = React.memo(function InlineCode({
+ className,
+ ...rest
+}: HTMLProps) {
+ return (
+
+ )
+})
diff --git a/src/ui/LogoQueryGG.tsx b/src/ui/LogoQueryGG.tsx
new file mode 100644
index 000000000..af86c606e
--- /dev/null
+++ b/src/ui/LogoQueryGG.tsx
@@ -0,0 +1,389 @@
+type LogoQueryGGProps = Omit, 'size'> & {
+ /** Size variant. 'small' uses compact viewBox. Defaults to 'default'. */
+ size?: 'default' | 'small'
+}
+
+export function LogoQueryGG({ size = 'default', ...props }: LogoQueryGGProps) {
+ if (size === 'small') {
+ return (
+
+
+
+
+