54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import React, { Children, ReactNode } from 'react';
|
|
import { Box, Text } from 'folds';
|
|
import { SectionFootnote, SectionLabel, SettingFlatGroup, SettingFlatRow } from './styles.css';
|
|
|
|
type SettingsSectionProps = {
|
|
// Uppercase muted heading above the list. Omit for an unlabelled section.
|
|
label?: ReactNode;
|
|
// Small caption under the label (rare — e.g. a privacy note).
|
|
footnote?: ReactNode;
|
|
// Each direct child becomes one row of the flat list. Falsy children
|
|
// (conditional rows) are dropped so the hairline dividers stay correct.
|
|
children: ReactNode;
|
|
};
|
|
|
|
/**
|
|
* A Dawn flat settings list: an uppercase muted label over edge-to-edge rows
|
|
* parted by hairline dividers — no card box or surface fill (iOS/Telegram
|
|
* grouped-list feel). Replaces the stock-Cinny "floating outlined card per
|
|
* setting" pattern.
|
|
*/
|
|
export function SettingsSection({ label, footnote, children }: SettingsSectionProps) {
|
|
const rows = Children.toArray(children).filter(Boolean);
|
|
if (rows.length === 0) return null;
|
|
|
|
return (
|
|
<Box direction="Column" gap="100">
|
|
{label && (
|
|
<Box direction="Column">
|
|
<Text as="span" className={SectionLabel}>
|
|
{label}
|
|
</Text>
|
|
{footnote && (
|
|
<Text as="span" className={SectionFootnote}>
|
|
{footnote}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
)}
|
|
<div className={SettingFlatGroup}>
|
|
{rows.map((row, index) => (
|
|
<div
|
|
// Rows are positional and have no stable id; index key is correct
|
|
// here — the list never reorders, only conditionally includes rows.
|
|
// eslint-disable-next-line react/no-array-index-key
|
|
key={index}
|
|
className={SettingFlatRow}
|
|
>
|
|
{row}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Box>
|
|
);
|
|
}
|