mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

refine admin cards and form headers
CI / quality (push) Has been cancelled
Details

Browse Source
This commit is contained in:
MOH
2026-03-15 08:59:19 +01:00
parent 623b492787
commit 6caf723695
14 changed files with 371 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/admin/site-settings-form.tsx
+29 -19
View File
@@ -16,6 +16,7 @@ import {
} from "lucide-react";
import { useEffect, useId, useMemo, useRef, useState } from "react";
import { StatsCard } from "@/components/dashboard/stats-card";
import { AppCard } from "@/components/ui/app-card";
import { Button } from "@/components/ui/button";
import {
@@ -269,7 +270,7 @@ function SiteSettingsMediaRow({
return (
<>
<AppCard level={2} padding="sm">
<AppCard level={2} layer="single" padding="sm">
<div className="grid gap-4 lg:grid-cols-[180px_minmax(0,1fr)]">
<div className="space-y-2">
<p className="text-sm font-semibold text-foreground">{title}</p>
@@ -392,7 +393,7 @@ function LocalizedFieldsSection({
<div className="grid gap-5 lg:grid-cols-3">
{localeFields.map((locale) => (
<AppCard key={locale.key} level={2} padding="sm" className="space-y-4">
<AppCard key={locale.key} level={2} layer="single" padding="sm" className="space-y-4">
<p className="text-sm font-semibold text-foreground">{locale.label}</p>
<div className="space-y-2">
@@ -532,9 +533,19 @@ export function SiteSettingsForm({
const faviconPreviewUrl = getMediaPreviewUrl(favicon, mediaOptions, initialBindings.favicon?.url);
const defaultOgImagePreviewUrl = getMediaPreviewUrl(defaultOgImage, mediaOptions, initialBindings.defaultOgImage?.url);
const routePreview = settings.defaultLocale === "de" ? "/about" : `/${settings.defaultLocale}/about`;
const brandAssetsCount = [siteLogoLight, siteLogoDark].filter((item) => item.assetId).length;
const previewAssetsCount = [favicon, defaultOgImage].filter((item) => item.assetId).length;
return (
<form id="site-settings-form" action={action} className="space-y-6">
{mode === "brand" ? (
<div className="grid gap-4 md:grid-cols-3 xl:min-w-[620px]">
<StatsCard title="Primary" value={settings.brand.primaryColor} icon={Palette} />
<StatsCard title="Logos" value={String(brandAssetsCount)} icon={ImageIcon} />
<StatsCard title="Preview" value={String(previewAssetsCount)} icon={Globe2} />
</div>
) : null}
<div className="grid gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(300px,1fr)]">
<div className="space-y-6">
{mode === "brand" ? (
@@ -547,10 +558,10 @@ export function SiteSettingsForm({
</p>
</div>
<AppCard level={2} padding="sm" className="space-y-4">
<AppCard level={2} layer="single" padding="sm" className="space-y-4">
<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]">
<div className="space-y-2">
<Label htmlFor="primaryColor">Primary Color</Label>
<Label htmlFor="primaryColor" className="sr-only">Primary Color</Label>
<div className="flex items-center gap-3">
<Input
id="primaryColor"
@@ -569,6 +580,7 @@ export function SiteSettingsForm({
className="h-11 w-20 rounded-nested p-1"
/>
<Input
aria-label="Primary Color Value"
value={settings.brand.primaryColor}
onChange={(event) =>
setSettings((current) => ({
@@ -667,10 +679,10 @@ export function SiteSettingsForm({
</p>
</div>
<AppCard level={2} padding="sm" className="space-y-4">
<AppCard level={2} layer="single" padding="sm" className="space-y-4">
<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
<div className="space-y-2">
<Label htmlFor="defaultLocaleTrigger">Default Locale</Label>
<Label htmlFor="defaultLocaleTrigger" className="sr-only">Default Locale</Label>
<Select
name="defaultLocale"
value={settings.defaultLocale}
@@ -715,12 +727,10 @@ export function SiteSettingsForm({
<div className="xl:sticky xl:top-6 xl:self-start">
<section className="space-y-4">
<h2 className="text-lg font-semibold text-foreground">Preview</h2>
{mode === "brand" ? (
<>
<AppCard level={2} padding="sm" className="space-y-2">
<p className="text-sm font-semibold text-foreground">Search Result</p>
<AppCard level={2} layer="single" padding="sm" className="space-y-2">
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Search Result</p>
<div className="rounded-nested border border-border/70 bg-background p-3">
<div className="flex items-center gap-3">
{faviconPreviewUrl ? (
@@ -740,10 +750,10 @@ export function SiteSettingsForm({
</div>
</AppCard>
<AppCard level={2} padding="sm" className="space-y-2">
<p className="text-sm font-semibold text-foreground">Brand Assets</p>
<AppCard level={2} layer="single" padding="sm" className="space-y-2">
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Brand Assets</p>
<div className="grid gap-3 sm:grid-cols-2">
<AppCard level={1} padding="sm">
<AppCard level={1} layer="single" padding="sm">
<p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">Light</p>
{siteLogoLightPreviewUrl ? (
<img src={siteLogoLightPreviewUrl} alt="Site Logo Light" className="h-10 w-full object-contain" />
@@ -763,8 +773,8 @@ export function SiteSettingsForm({
</div>
</AppCard>
<AppCard level={2} padding="sm" className="space-y-2">
<p className="text-sm font-semibold text-foreground">Social Preview</p>
<AppCard level={2} layer="single" padding="sm" className="space-y-2">
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Social Preview</p>
<div className="overflow-hidden rounded-nested border border-border/70 bg-background">
<div className="h-1.5" style={{ backgroundColor: settings.brand.primaryColor }} />
{defaultOgImagePreviewUrl ? (
@@ -787,8 +797,8 @@ export function SiteSettingsForm({
</>
) : (
<>
<AppCard level={2} padding="sm" className="space-y-2">
<p className="text-sm font-semibold text-foreground">Visitor Routing</p>
<AppCard level={2} layer="single" padding="sm" className="space-y-2">
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Visitor Routing</p>
<div className="rounded-nested border border-border/70 bg-background p-3">
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
<Languages className="h-4 w-4 text-brand-primary" />
@@ -800,8 +810,8 @@ export function SiteSettingsForm({
</div>
</AppCard>
<AppCard level={2} padding="sm" className="space-y-2">
<p className="text-sm font-semibold text-foreground">Locale Summary</p>
<AppCard level={2} layer="single" padding="sm" className="space-y-2">
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Locale Summary</p>
<div className="rounded-nested border border-border/70 bg-background">
<Table>
<TableBody>