import React, { createContext, useContext } from "react"; import { Card as ThemeCard, ThemeUIStyleObject } from "theme-ui"; import { CardBox, CardBoxProps } from "./CardBox"; const CardRadiusContext = createContext("6px"); export const useCardRadius = () => useContext(CardRadiusContext); interface CardProps extends Omit { Header?: JSX.Element | null; SubHeader?: JSX.Element | null; Body?: React.FC | null; Footer?: React.FC | JSX.Element | null; borderFooter?: boolean; bodySx?: ThemeUIStyleObject; footerSx?: ThemeUIStyleObject; } export const Card: React.FC = ({ Header = null, SubHeader = null, Body = null, Footer = null, borderFooter = false, radius = "6px", bodySx = {}, footerSx = {}, sx = null, bg, background, children, ...rest }) => ( `1px solid ${String(t.colors?.borders)}`, borderRadius: radius, ...sx, }} {...rest} > {Header ? Header : null} {SubHeader ? SubHeader : null} {Body ? : null} {/* eslint-disable-next-line @typescript-eslint/strict-boolean-expressions */} {children ? children : null} {Footer ? ( `1px solid ${String(colors?.borders)}`, } : null), ...footerSx, }} radius={radius} withRadius > {typeof Footer === "object" ? Footer :