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

Refactor frontend system primitives and surfaces

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
components/root/portfolio-project-form.tsx
+9 -9
View File
@@ -243,7 +243,7 @@ function PanelButton({
type="button"
onClick={onClick}
className={cn(
"flex w-full items-center justify-between rounded-lg border px-4 py-3 text-left transition-colors",
"flex w-full items-center justify-between rounded-nested border px-4 py-3 text-left transition-colors",
active
? "border-input bg-accent/40"
: "border-input bg-background hover:bg-accent/20",
@@ -265,17 +265,17 @@ function LocaleBlock({
renderField: (locale: (typeof localeFieldConfig)[number]) => React.ReactNode;
}) {
return (
<div className="space-y-3 rounded-lg border border-input bg-background p-4">
<AppCard level={2} padding="sm" className="space-y-3">
<p className="text-sm font-medium text-foreground">{title}</p>
<div className="grid gap-4 xl:grid-cols-3">
{localeFieldConfig.map((locale) => (
<div key={`${title}-${locale.key}`} className="space-y-2 rounded-lg border border-input bg-card p-4">
<AppCard key={`${title}-${locale.key}`} padding="sm" className="space-y-2 rounded-nested">
<p className="text-sm font-medium text-foreground">{locale.label}</p>
{renderField(locale)}
</div>
</AppCard>
))}
</div>
</div>
</AppCard>
);
}
@@ -540,12 +540,12 @@ export function PortfolioProjectForm({
/>
<div className="grid gap-4 md:grid-cols-2">
<label className="flex items-center gap-3 rounded-md border border-input bg-card px-4 py-3 text-sm">
<label className="flex items-center gap-3 rounded-nested border border-input bg-card px-4 py-3 text-sm">
<input type="checkbox" name="isFeatured" checked={projectState.isFeatured} onChange={(event) => setProjectField("isFeatured", event.target.checked)} />
Featured
</label>
<label className="flex items-center gap-3 rounded-md border border-input bg-card px-4 py-3 text-sm">
<label className="flex items-center gap-3 rounded-nested border border-input bg-card px-4 py-3 text-sm">
<input type="checkbox" name="isPublished" checked={projectState.isPublished} onChange={(event) => setProjectField("isPublished", event.target.checked)} />
Published
</label>
@@ -624,7 +624,7 @@ export function PortfolioProjectForm({
type="button"
onClick={() => setSelectedSectionIndex(index)}
className={cn(
"w-full rounded-lg border p-4 text-left transition-colors",
"w-full rounded-nested border p-4 text-left transition-colors",
selectedSectionIndex === index
? "border-input bg-accent/40"
: "border-input bg-background hover:bg-accent/20",
@@ -769,7 +769,7 @@ export function PortfolioProjectForm({
type="button"
onClick={() => setSelectedAssetIndex(index)}
className={cn(
"w-full rounded-lg border p-4 text-left transition-colors",
"w-full rounded-nested border p-4 text-left transition-colors",
selectedAssetIndex === index
? "border-input bg-accent/40"
: "border-input bg-background hover:bg-accent/20",