ourworld_web/www_project_mycelium
22
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-15 18:14:25 +02:00
parent d8da5325de
commit 225c10a853
7 changed files with 300 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Fields.tsx
View File

@@ -1,14 +1,21 @@
import { useId } from 'react'
import clsx from 'clsx'
const formClasses =
'block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-hidden focus:ring-cyan-500 sm:text-sm'
const formClasses = {
light:
'block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm',
dark:
'block w-full appearance-none rounded-lg border border-gray-600 bg-transparent py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-white placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm',
}
function Label({ id, children }: { id: string; children: React.ReactNode }) {
function Label({ id, children, variant = 'light' }: { id: string; children: React.ReactNode, variant?: 'light' | 'dark' }) {
return (
<label
htmlFor={id}
className="mb-2 block text-sm font-semibold text-gray-900"
className={clsx(
'mb-2 block text-sm font-semibold',
variant === 'light' ? 'text-gray-900' : 'text-white',
)}
>
{children}
</label>
@@ -19,14 +26,15 @@ export function TextField({
label,
type = 'text',
className,
variant = 'light',
...props
}: Omit<React.ComponentPropsWithoutRef<'input'>, 'id'> & { label?: string }) {
}: Omit<React.ComponentPropsWithoutRef<'input'>, 'id'> & { label?: string; variant?: 'light' | 'dark' }) {
let id = useId()
return (
<div className={className}>
{label && <Label id={id}>{label}</Label>}
<input id={id} type={type} {...props} className={formClasses} />
{label && <Label id={id} variant={variant}>{label}</Label>}
<input id={id} type={type} {...props} className={formClasses[variant]} />
</div>
)
}