feat(settings): Fönster redesign - flat rows, ? help, dirty save bar (#1193)
* feat(settings): Fönster redesign - flat rows, help behind ?, dirty save bar Founder-approved concept (2026-07-25) applied to the whole settings surface, modal and full-page variants alike: - New primitives in components/settings/SettingsRows.tsx: section header (serif title + one-line intro), eyebrow groups, hairline label/control rows, flat inputs/selects/textareas, segmented control, animated reveal for gated settings, danger zone. - Every static explanation paragraph moved behind a "?" popover (HelpPopover) at row or group level; dynamic status stays visible. - Modal chrome: company kicker over serif title, fixed 920x680 window. - SettingsFormWrapper: save is a sticky bar that appears only when the form is dirty; collapses to zero height when clean. - All 11 sections converted (Konto, Abonnemang, Företag, Bokföring, Skatt, Löner, Fakturering, Mallar, Bank incl. Enable Banking-panel, Assistenten, API) with handlers, validation, role/entitlement/sandbox gates and i18n keys preserved; checkboxes became switches, cards dissolved into groups. - Fix: Escape with an open help popover closed the whole settings modal; it now closes the popover first. - New i18n keys: settings_intro.*, group labels, wrapper_unsaved (sv+en). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(settings): founder feedback round 1 on the Fönster redesign - Abonnemang paying state: status and manage split into two rows so the row no longer wraps awkwardly; the included-features list now shows for paying companies too. - Logos where the counterpart has one: BankID mark on the security row and on the Koppla BankID button, Skatteverket mark on the connection rows. - Buttons are unmistakably buttons: 27 text-labeled row actions went from ghost to outline pills; icon-only actions stay quiet. - The agent-knowledge view (Regler & profil: Dina regler, Momsprofil, Konventioner) converted to the flat row language; it was the last old-style surface inside settings. Descriptions moved behind "?", rules render as hairline rows, the per-row "Regel" chip demoted to muted text. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(settings): address review-bot findings on the Fönster redesign - SettingsFormWrapper marks the form dirty on switch clicks too: Radix Switch is a button and fires no input event, so switch-only changes (f-skatt, KU, ROT/RUT, OSS...) never revealed the save bar. - i18n: the migrated hardcoded strings got keys in both locales (fiscal-period start date/range/months, security set-password trio); dates in ApiKeysPanel/OAuthClientsPanel/CalendarFeedSettings now pass the active locale to formatDateLong. - A11y: member remove/revoke buttons and the invite role select got correct accessible names; BankNameCombobox accepts aria-label wired from its row; the pinned-fact icon exposes role img. - BankIdSettings: explicit Avbryt under the QR block so a cancelled BankID flow cannot strand isLinking. - VoucherSeriesManager: clear the skeleton when no company is resolved. Verified end to end in sandbox: switch-only dirty bar, PUT /api/settings 200 for text and switch saves, persistence across hard reload. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
co-authored by
Claude Fable 5
Claude Fable 5
parent
d54b43f80f
commit
6d9846b1e7
@@ -3,15 +3,17 @@
|
||||
import { useTranslations } from 'next-intl'
|
||||
import Link from 'next/link'
|
||||
import { Pin, ArrowUpRight } from 'lucide-react'
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { SettingsGroup, SettingsRow } from '@/components/settings/SettingsRows'
|
||||
import type { AgentCompetence, AtomTier, FactKind, FactSource } from '@/lib/agent-context/agent-competence'
|
||||
|
||||
/**
|
||||
* Read-only views of the agent's competence (domain-knowledge atoms) and top
|
||||
* learned facts, for the "Vad din agent vet" overview. Each is a standalone
|
||||
* Card so it can sit in its own tab. Full editable management lives in
|
||||
* /settings/assistant; each links there.
|
||||
* learned facts, for the "Vad din agent vet" overview. Each renders as a flat
|
||||
* settings group (Fönster language) with its description behind the group
|
||||
* "?" help. Full editable management lives in /settings/assistant; each
|
||||
* links there.
|
||||
*/
|
||||
|
||||
const TIER_ORDER: AtomTier[] = ['horizontal', 'vertical', 'modifier']
|
||||
@@ -24,50 +26,43 @@ export function CompetenceCard({ competence }: { competence: AgentCompetence })
|
||||
tier === 'horizontal' ? t('tier_horizontal') : tier === 'vertical' ? t('tier_vertical') : t('tier_modifier')
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{t('comp_title')}</CardTitle>
|
||||
<CardDescription>{t('comp_desc')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6 pt-0">
|
||||
{atoms.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">{t('comp_empty')}</p>
|
||||
) : (
|
||||
<>
|
||||
{TIER_ORDER.map((tier) => {
|
||||
const items = atoms.filter((a) => a.tier === tier)
|
||||
if (items.length === 0) return null
|
||||
return (
|
||||
<div key={tier} className="space-y-2">
|
||||
<h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{tierLabel(tier)}
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{items.map((a) => (
|
||||
<Badge
|
||||
key={a.id}
|
||||
variant={a.active ? 'secondary' : 'outline'}
|
||||
className={a.active ? '' : 'text-muted-foreground'}
|
||||
title={a.description}
|
||||
>
|
||||
{a.title}
|
||||
{!a.active && tier !== 'horizontal' && (
|
||||
<span className="ml-1.5 opacity-70">· {t('badge_dormant')}</span>
|
||||
)}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
<SettingsGroup label={t('comp_title')} help={t('comp_desc')}>
|
||||
{atoms.length === 0 ? (
|
||||
<p className="px-1 py-3 text-sm text-muted-foreground">{t('comp_empty')}</p>
|
||||
) : (
|
||||
<>
|
||||
{/* One row per tier: micro-label left, atom chips right. Dormant
|
||||
atoms are the exception the outline chip variant marks. */}
|
||||
{TIER_ORDER.map((tier) => {
|
||||
const items = atoms.filter((a) => a.tier === tier)
|
||||
if (items.length === 0) return null
|
||||
return (
|
||||
<SettingsRow key={tier} label={tierLabel(tier)} align="baseline">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{items.map((a) => (
|
||||
<Badge
|
||||
key={a.id}
|
||||
variant={a.active ? 'secondary' : 'outline'}
|
||||
className={a.active ? '' : 'text-muted-foreground'}
|
||||
title={a.description}
|
||||
>
|
||||
{a.title}
|
||||
{!a.active && tier !== 'horizontal' && (
|
||||
<span className="ml-1.5 opacity-70">· {t('badge_dormant')}</span>
|
||||
)}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<div className="flex items-center justify-between pt-1 text-xs text-muted-foreground">
|
||||
<span className="tabular-nums">{t('comp_count', { total: atoms.length, active: activeAtoms })}</span>
|
||||
<ManageLink href="/settings/assistant?view=skills" label={t('comp_manage')} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</SettingsRow>
|
||||
)
|
||||
})}
|
||||
<div className="flex items-center justify-between gap-4 px-1 pt-3 text-xs text-muted-foreground">
|
||||
<span className="tabular-nums">{t('comp_count', { total: atoms.length, active: activeAtoms })}</span>
|
||||
<ManageLink href="/settings/assistant?view=skills" label={t('comp_manage')} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</SettingsGroup>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -80,51 +75,49 @@ export function FactsCard({ competence }: { competence: AgentCompetence }) {
|
||||
s === 'composer' ? t('source_composer') : s === 'user_taught' ? t('source_user_taught') : s === 'agent_learned' ? t('source_agent_learned') : t('source_derived')
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{t('facts_title')}</CardTitle>
|
||||
<CardDescription>{t('facts_desc')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 pt-0">
|
||||
{facts.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">{t('facts_empty')}</p>
|
||||
) : (
|
||||
<>
|
||||
<ul className="space-y-3">
|
||||
{facts.map((f) => (
|
||||
<li key={f.id} className="flex items-start gap-2">
|
||||
{f.is_pinned ? (
|
||||
<Pin className="mt-1 h-3.5 w-3.5 shrink-0 fill-current text-muted-foreground" aria-label={t('facts_pinned')} />
|
||||
) : (
|
||||
<span className="mt-1 h-3.5 w-3.5 shrink-0" aria-hidden />
|
||||
)}
|
||||
<div className="min-w-0 space-y-0.5">
|
||||
<p className="text-sm text-foreground">{f.content}</p>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
{kindLabel(f.kind)} · {sourceLabel(f.source)}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex items-center justify-between pt-1 text-xs text-muted-foreground">
|
||||
<span className="tabular-nums">
|
||||
{factsActiveTotal > facts.length ? t('facts_more', { n: factsActiveTotal - facts.length }) : ''}
|
||||
</span>
|
||||
<ManageLink href="/settings/assistant?view=memory" label={t('facts_manage')} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<SettingsGroup label={t('facts_title')} help={t('facts_desc')}>
|
||||
{facts.length === 0 ? (
|
||||
<p className="px-1 py-3 text-sm text-muted-foreground">{t('facts_empty')}</p>
|
||||
) : (
|
||||
<>
|
||||
{/* Flat hairline rows: fact content with its kind/source flowing
|
||||
inline as muted text; the pin marks the exception. */}
|
||||
<ul>
|
||||
{facts.map((f) => (
|
||||
<li key={f.id} className="flex items-start gap-2 border-b border-border px-1 py-3">
|
||||
{f.is_pinned ? (
|
||||
<Pin role="img" className="mt-1 h-3.5 w-3.5 shrink-0 fill-current text-muted-foreground" aria-label={t('facts_pinned')} />
|
||||
) : (
|
||||
<span className="mt-1 h-3.5 w-3.5 shrink-0" aria-hidden />
|
||||
)}
|
||||
<div className="flex min-w-0 flex-1 flex-wrap items-baseline gap-x-2 gap-y-1">
|
||||
<span className="text-sm text-foreground">{f.content}</span>
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
{kindLabel(f.kind)} · {sourceLabel(f.source)}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex items-center justify-between gap-4 px-1 pt-3 text-xs text-muted-foreground">
|
||||
<span className="tabular-nums">
|
||||
{factsActiveTotal > facts.length ? t('facts_more', { n: factsActiveTotal - facts.length }) : ''}
|
||||
</span>
|
||||
<ManageLink href="/settings/assistant?view=memory" label={t('facts_manage')} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</SettingsGroup>
|
||||
)
|
||||
}
|
||||
|
||||
function ManageLink({ href, label }: { href: string; label: string }) {
|
||||
return (
|
||||
<Link href={href} className="inline-flex items-center gap-1 text-foreground underline underline-offset-2 hover:text-muted-foreground">
|
||||
{label}
|
||||
<ArrowUpRight className="h-3 w-3" />
|
||||
</Link>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href={href}>
|
||||
{label}
|
||||
<ArrowUpRight className="ml-1 h-3 w-3" />
|
||||
</Link>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,21 +3,10 @@
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { Brain } from 'lucide-react'
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
} from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
} from '@/components/ui/table'
|
||||
SettingsGroup,
|
||||
SettingsRow,
|
||||
SettingsSectionHeader,
|
||||
} from '@/components/settings/SettingsRows'
|
||||
import { AccountNumber } from '@/components/ui/account-number'
|
||||
import { EmptyState } from '@/components/ui/empty-state'
|
||||
import { formatDateLong } from '@/lib/utils'
|
||||
@@ -74,18 +63,14 @@ export function AgentKnowledgeView({
|
||||
// already remember facts: show those rather than a dead end.
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<EmptyState
|
||||
icon={Brain}
|
||||
title={t('empty_title')}
|
||||
description={t('empty_description')}
|
||||
actionLabel={t('empty_action')}
|
||||
actionHref="/transactions"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<EmptyState
|
||||
icon={Brain}
|
||||
title={t('empty_title')}
|
||||
description={t('empty_description')}
|
||||
actionLabel={t('empty_action')}
|
||||
actionHref="/transactions"
|
||||
/>
|
||||
<div>
|
||||
<CompetenceCard competence={competence} />
|
||||
<FactsCard competence={competence} />
|
||||
</div>
|
||||
@@ -109,126 +94,84 @@ export function AgentKnowledgeView({
|
||||
? t('period_yearly')
|
||||
: (vat_profile.moms_period ?? t('unknown'))
|
||||
|
||||
// "Regler & profil": user-authored rules + observed VAT + conventions.
|
||||
// Rendered inline below the graph; Minne and Kompetens have their own
|
||||
// top-level tabs, so nesting a second tab row here would just duplicate them.
|
||||
const configContent = (
|
||||
<>
|
||||
{explicit_rules.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{t('rules_title')}</CardTitle>
|
||||
<CardDescription>{t('rules_description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>{t('col_rule')}</TableHead>
|
||||
<TableHead>{t('col_match')}</TableHead>
|
||||
<TableHead>{t('col_account')}</TableHead>
|
||||
<TableHead>{t('col_vat')}</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{explicit_rules.map((r, i) => (
|
||||
<TableRow key={r.rule_name + r.match + i}>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="font-medium">{r.rule_name}</span>
|
||||
<Badge variant="default">{t('src_rule')}</Badge>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="font-mono text-xs text-muted-foreground">{r.match}</TableCell>
|
||||
<TableCell>
|
||||
{r.account_number
|
||||
? <AccountNumber number={r.account_number} showName size="sm" />
|
||||
: <span className="text-muted-foreground">-</span>}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">{vatLabel(r.vat_treatment) ?? '-'}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{t('vat_title')}</CardTitle>
|
||||
<CardDescription>{t('vat_description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 pt-0">
|
||||
<Row label={t('vat_registered_label')}>
|
||||
<Badge variant={vat_profile.registered ? 'success' : 'outline'}>
|
||||
{vat_profile.registered ? t('yes') : t('no')}
|
||||
</Badge>
|
||||
</Row>
|
||||
<Row label={t('vat_period_label')}>
|
||||
<span className="text-sm">{periodLabel}</span>
|
||||
</Row>
|
||||
<Row label={t('vat_treatments_label')}>
|
||||
{vat_profile.treatments_used_12m.length === 0 ? (
|
||||
<span className="text-sm text-muted-foreground">{t('vat_no_treatments')}</span>
|
||||
) : (
|
||||
<div className="flex flex-wrap justify-end gap-2">
|
||||
{vat_profile.treatments_used_12m.map((code) => (
|
||||
<Badge key={code} variant="outline">{vatLabel(code)}</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Row>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{t('conv_title')}</CardTitle>
|
||||
<CardDescription>{t('conv_description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 pt-0">
|
||||
<Row label={t('conv_method_label')}>
|
||||
<span className="text-sm">{methodLabel}</span>
|
||||
</Row>
|
||||
<Row label={t('conv_series_label')}>
|
||||
{conventions.voucher_series_in_use.length === 0 ? (
|
||||
<span className="text-sm text-muted-foreground">-</span>
|
||||
) : (
|
||||
<div className="flex flex-wrap justify-end gap-2">
|
||||
{conventions.voucher_series_in_use.map((s) => (
|
||||
<Badge key={s} variant="secondary" className="font-mono">{s}</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Row>
|
||||
<Row label={t('conv_salary_label')}>
|
||||
<Badge variant={conventions.salary_run_active ? 'success' : 'outline'}>
|
||||
{conventions.salary_run_active ? t('yes') : t('no')}
|
||||
</Badge>
|
||||
</Row>
|
||||
{conventions.typical_booking_lag_days !== null && (
|
||||
<Row label={t('conv_lag_label')}>
|
||||
<span className="text-sm tabular-nums">{t('meta_lag_value', { days: conventions.typical_booking_lag_days })}</span>
|
||||
</Row>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* The cinematic hero: a self-contained dark panel with its own header */}
|
||||
<LedgerGraph deep={deep} companyName={companyName} />
|
||||
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{t('tab_config')}
|
||||
</h2>
|
||||
{configContent}
|
||||
{/* "Regler & profil": user-authored rules + observed VAT + conventions,
|
||||
in the flat settings language (groups under eyebrow labels, static
|
||||
descriptions behind the group "?"). Minne and Kompetens have their
|
||||
own top-level views, so no second tab row here. */}
|
||||
<section>
|
||||
<SettingsSectionHeader title={t('tab_config')} />
|
||||
|
||||
{explicit_rules.length > 0 && (
|
||||
<SettingsGroup label={t('rules_title')} help={t('rules_description')}>
|
||||
{explicit_rules.map((r, i) => {
|
||||
const vat = vatLabel(r.vat_treatment)
|
||||
return (
|
||||
<div
|
||||
key={r.rule_name + r.match + i}
|
||||
className="flex flex-wrap items-baseline gap-x-3 gap-y-1 border-b border-border px-1 py-3"
|
||||
>
|
||||
<span className="text-sm">{r.rule_name}</span>
|
||||
<span className="min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground">
|
||||
{r.match}
|
||||
</span>
|
||||
<span className="flex shrink-0 flex-wrap items-baseline gap-x-2 text-xs text-muted-foreground">
|
||||
{r.account_number ? (
|
||||
<AccountNumber number={r.account_number} showName size="sm" />
|
||||
) : (
|
||||
<span>-</span>
|
||||
)}
|
||||
{vat && <span>· {vat}</span>}
|
||||
<span>· {t('src_rule')}</span>
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</SettingsGroup>
|
||||
)}
|
||||
|
||||
<SettingsGroup label={t('vat_title')} help={t('vat_description')}>
|
||||
<SettingsRow label={t('vat_registered_label')}>
|
||||
<span>{vat_profile.registered ? t('yes') : t('no')}</span>
|
||||
</SettingsRow>
|
||||
<SettingsRow label={t('vat_period_label')}>
|
||||
<span>{periodLabel}</span>
|
||||
</SettingsRow>
|
||||
<SettingsRow label={t('vat_treatments_label')}>
|
||||
{vat_profile.treatments_used_12m.length === 0 ? (
|
||||
<span className="text-muted-foreground">{t('vat_no_treatments')}</span>
|
||||
) : (
|
||||
<span>{vat_profile.treatments_used_12m.map((code) => vatLabel(code)).join(' · ')}</span>
|
||||
)}
|
||||
</SettingsRow>
|
||||
</SettingsGroup>
|
||||
|
||||
<SettingsGroup label={t('conv_title')} help={t('conv_description')}>
|
||||
<SettingsRow label={t('conv_method_label')}>
|
||||
<span>{methodLabel}</span>
|
||||
</SettingsRow>
|
||||
<SettingsRow label={t('conv_series_label')}>
|
||||
{conventions.voucher_series_in_use.length === 0 ? (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
) : (
|
||||
<span className="font-mono text-xs">{conventions.voucher_series_in_use.join(', ')}</span>
|
||||
)}
|
||||
</SettingsRow>
|
||||
<SettingsRow label={t('conv_salary_label')}>
|
||||
<span>{conventions.salary_run_active ? t('yes') : t('no')}</span>
|
||||
</SettingsRow>
|
||||
{conventions.typical_booking_lag_days !== null && (
|
||||
<SettingsRow label={t('conv_lag_label')}>
|
||||
<span className="tabular-nums">
|
||||
{t('meta_lag_value', { days: conventions.typical_booking_lag_days })}
|
||||
</span>
|
||||
</SettingsRow>
|
||||
)}
|
||||
</SettingsGroup>
|
||||
</section>
|
||||
|
||||
<p className="text-right text-xs text-muted-foreground">
|
||||
@@ -237,12 +180,3 @@ export function AgentKnowledgeView({
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Row({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-sm text-muted-foreground">{label}</span>
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user