{title}

import React, { ReactNode } from 'react'; import styled from 'styled-components'; import { Card, type CardProps } from '@/shared/components/ui'; const CardHeaderContent = styled.div` display: flex; align-items: center; gap: ${({ theme }) => theme.spacing[3]}; min-width: 0; `; const IconWrap = styled.span` width: 30px; height: 30px; border-radius: ${({ theme }) => theme.borderRadius.md}; background-color: ${({ theme }) => theme.colors.primaryLight}; color: ${({ theme }) => theme.colors.primary}; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; svg { width: 17px; height: 17px; } `; const Title = styled.h3` margin: 0; font-size: ${({ theme }) => theme.typography.fontSize.sm}; font-weight: ${({ theme }) => theme.typography.fontWeight.semibold}; color: ${({ theme }) => theme.colors.text.primary}; text-align: start; line-height: ${({ theme }) => theme.typography.lineHeight.subhead}; `; const Body = styled.div<{ $compact?: boolean }>` display: flex; flex-direction: column; gap: ${({ theme, $compact }) => ($compact ? theme.spacing[3] : theme.layout.controlGap)}; min-width: 0; `; export interface SidebarInfoCardProps { title: string; icon?: ReactNode; surface?: 'elevated' | 'muted'; compact?: boolean; children: ReactNode; } export const SidebarInfoCard: React.FC = ({ title, icon, surface = 'elevated', compact = false, children, }) => { const variant: CardProps['variant'] = surface === 'muted' ? 'muted' : 'elevated'; const padding: CardProps['padding'] = compact ? 'sm' : 'md'; return ( {icon && {icon}} {title} } > {children} ); };