52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
/**
|
|
* Стеклянная панель в стиле iOS 26.
|
|
* Переиспользуется для блоков статистики, графиков, списков.
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
export interface PanelProps {
|
|
children: React.ReactNode;
|
|
/** Дополнительный класс */
|
|
className?: string;
|
|
/** Включить hover-эффект (тень) */
|
|
interactive?: boolean;
|
|
/** Внутренние отступы. По умолчанию 24px */
|
|
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
style?: React.CSSProperties;
|
|
/** Атрибут для онбординга (data-tour) */
|
|
'data-tour'?: string;
|
|
}
|
|
|
|
const paddingMap = {
|
|
none: 0,
|
|
sm: 16,
|
|
md: 24,
|
|
lg: 32,
|
|
};
|
|
|
|
export const Panel: React.FC<PanelProps> = ({
|
|
children,
|
|
className = '',
|
|
interactive = false,
|
|
padding = 'md',
|
|
style,
|
|
'data-tour': dataTour,
|
|
}) => {
|
|
const p = paddingMap[padding];
|
|
return (
|
|
<div
|
|
data-tour={dataTour}
|
|
className={`ios26-panel ${interactive ? 'ios26-panel-interactive' : ''} ${className}`.trim()}
|
|
style={{
|
|
padding: p ? `${p}px` : 0,
|
|
...style,
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|