Refactor frontend system primitives and surfaces

This commit is contained in:
MOH
2026-03-09 06:15:01 +01:00
parent 3e835ee620
commit a65037e3b3
22 changed files with 1363 additions and 106 deletions
+11 -11
View File
@@ -203,7 +203,7 @@ export function SiteSettingsForm({
</CardHeader>
<CardContent className="grid gap-4 lg:grid-cols-3">
{localeFields.map((locale) => (
<div key={locale.key} className="space-y-4 rounded-lg border bg-card p-4 shadow-sm">
<AppCard key={locale.key} padding="sm" className="space-y-4 rounded-nested">
<div>
<p className="text-sm font-medium text-foreground">{locale.label}</p>
<p className="mt-1 text-xs text-muted-foreground">Globale Standardwerte fuer diese Sprache.</p>
@@ -312,7 +312,7 @@ export function SiteSettingsForm({
/>
</div>
</div>
</div>
</AppCard>
))}
</CardContent>
</AppCard>
@@ -429,7 +429,7 @@ export function SiteSettingsForm({
: `${locale.sampleTitle} | ${localeSettings.siteName}`;
return (
<div key={locale.key} className="rounded-md border bg-card p-3">
<AppCard key={locale.key} className="rounded-nested p-3">
<p className="font-medium text-foreground">{locale.label}</p>
<p className="mt-2 text-xs text-muted-foreground">
Example page title: {locale.sampleTitle}
@@ -441,7 +441,7 @@ export function SiteSettingsForm({
<p className="mt-2 text-xs text-muted-foreground">
{localeSettings.subhead || "No subhead"}
</p>
</div>
</AppCard>
);
})}
</div>
@@ -451,7 +451,7 @@ export function SiteSettingsForm({
Header Logo Preview
</div>
<div className="grid gap-3">
<div className="rounded-md border bg-card p-4">
<AppCard padding="sm" className="rounded-nested">
<p className="mb-3 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
Light
</p>
@@ -466,8 +466,8 @@ export function SiteSettingsForm({
Default light logo will be used
</div>
)}
</div>
<div className="rounded-md border border-border/70 bg-slate-950 p-4">
</AppCard>
<div className="rounded-nested border border-border/70 bg-slate-950 p-4">
<p className="mb-3 text-xs font-medium uppercase tracking-[0.2em] text-white/55">
Dark
</p>
@@ -489,7 +489,7 @@ export function SiteSettingsForm({
<Search className="h-4 w-4 text-brand-primary" />
Search Preview
</div>
<div className="rounded-md border bg-card p-4">
<AppCard padding="sm" className="rounded-nested">
<div className="flex items-center gap-3">
{faviconPreviewUrl ? (
<img src={faviconPreviewUrl} alt="Favicon" className="h-5 w-5 rounded-sm" />
@@ -512,13 +512,13 @@ export function SiteSettingsForm({
<p className="mt-2 text-xs text-muted-foreground/80">
{settings.locales.de.subhead || "No subhead"}
</p>
</div>
</AppCard>
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
<ImageIcon className="h-4 w-4 text-brand-secondary" />
Social Preview
</div>
<div className="overflow-hidden rounded-md border bg-card">
<AppCard className="overflow-hidden rounded-nested">
{defaultOgImagePreviewUrl ? (
<img src={defaultOgImagePreviewUrl} alt="Default OG" className="h-32 w-full object-cover" />
) : (
@@ -538,7 +538,7 @@ export function SiteSettingsForm({
{settings.locales.en.siteDescription || "No description"}
</p>
</div>
</div>
</AppCard>
</CardContent>
</AppCard>
</div>