78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
/**
|
|
* Строка списка «ключ — значение» в стиле iOS 26.
|
|
* Переиспользуется для статистики, настроек и т.п.
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
export interface ListRowProps {
|
|
/** Подпись слева */
|
|
label: string;
|
|
/** Значение справа */
|
|
value: React.ReactNode;
|
|
/** Иконка слева от подписи (опционально) */
|
|
icon?: React.ReactNode;
|
|
/** Выделить значение (primary, tertiary или error) */
|
|
highlight?: boolean | 'primary' | 'tertiary' | 'error';
|
|
/** Убрать нижний разделитель */
|
|
last?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export const ListRow: React.FC<ListRowProps> = ({
|
|
label,
|
|
value,
|
|
icon,
|
|
highlight = false,
|
|
last = false,
|
|
className = '',
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={`ios26-list-row ${className}`.trim()}
|
|
style={last ? { borderBottom: 'none' } : undefined}
|
|
>
|
|
<span
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
}}
|
|
>
|
|
{icon && (
|
|
<span
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: 'var(--md-sys-color-primary)',
|
|
}}
|
|
>
|
|
{icon}
|
|
</span>
|
|
)}
|
|
<span className="ios26-list-row-label">{label}</span>
|
|
</span>
|
|
<span
|
|
className="ios26-list-row-value"
|
|
style={
|
|
highlight
|
|
? {
|
|
color:
|
|
highlight === 'tertiary'
|
|
? 'var(--md-sys-color-tertiary)'
|
|
: highlight === 'error'
|
|
? 'var(--md-sys-color-error)'
|
|
: 'var(--md-sys-color-primary)',
|
|
}
|
|
: undefined
|
|
}
|
|
>
|
|
{value}
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|