2436dd9cac
Mobile-first Web-App fuer persoenliches Health-, Ernaehrungs-, Aktivitaets- und Einkaufs-Tracking im Home-Lab-Betrieb. Stack: pnpm Monorepo - Next.js 16 + React 19 + Tailwind (apps/admin) - Hono + tRPC + Better Auth mit 2FA und Passkeys (packages/api) - PostgreSQL + Drizzle ORM (packages/db) - Docker fuer Postgres und pgAdmin. Module: - Auth mit Login, 2FA (TOTP + Backup-Codes), Passkeys und Admin-Recovery - Tagesansicht mit Essen, Trinken, Gewicht, Aktivitaeten und Coach-Hinweisen - Lebensmittelkatalog mit Naehrwerten, Portionen, OCR/Barcode/Open Food Facts - Rezepte mit Live-Naehrwertberechnung und Community-Vorschlaegen - Essensplanung und Wochenbudget mit Sportbonus - Einkaufslisten mit Maerkten und Laufweg-Sortierung - Hellfireclub mit Aktivitaetspunkten und gemeinsamer Aktivitaetsplanung - Wearables-Vorbereitung (Fitbit / Google Fit / Health Connect) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
20 lines
773 B
TypeScript
20 lines
773 B
TypeScript
import { ReactNode } from "react";
|
|
|
|
type FormFieldProps = {
|
|
label: string;
|
|
hint?: string;
|
|
children: ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
export function FormField({ label, hint, children, className = "" }: FormFieldProps) {
|
|
return (
|
|
<label className={`block space-y-1.5 ${className}`}>
|
|
<span className="block text-xs font-black uppercase text-gray-400">{label}</span>
|
|
{children}
|
|
{hint ? <span className="block text-xs font-bold text-gray-400">{hint}</span> : null}
|
|
</label>
|
|
);
|
|
}
|
|
|
|
export const inputClassName = "w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm font-semibold text-gray-950 outline-none transition focus:border-[#0F766E] focus:ring-2 focus:ring-[#0F766E]/10 disabled:bg-gray-50 disabled:text-gray-400";
|