import * as React from 'react'; import { useContext } from 'react'; import { Typography } from 'antd'; import { useTheme } from 'antd-style'; import SiteContext from '../../../theme/slots/SiteContext'; export interface GroupMaskProps { style?: React.CSSProperties; children?: React.ReactNode; disabled?: boolean; } export function GroupMask({ children, style, disabled }: GroupMaskProps) { const additionalStyle: React.CSSProperties = disabled ? {} : { position: 'relative', background: `rgba(255,255,255,0.1)`, backdropFilter: `blur(25px)`, zIndex: 1, }; return (
{children}
); } export interface GroupProps { id?: string; title?: React.ReactNode; titleColor?: string; description?: React.ReactNode; children?: React.ReactNode; background?: string; /** 是否不使用两侧 margin */ collapse?: boolean; decoration?: React.ReactNode; } export default function Group(props: GroupProps) { const { id, title, titleColor, description, children, decoration, background, collapse } = props; const token = useTheme(); const { isMobile } = useContext(SiteContext); const marginStyle: React.CSSProperties = collapse ? {} : { maxWidth: 1208, marginInline: 'auto', boxSizing: 'border-box', paddingInline: isMobile ? token.margin : token.marginXXL, }; const childNode = ( <>
{title} {description}
{children ? (
{children}
) : (
)}
); return (
{decoration}
{childNode}
); }