85 lines
1.8 KiB
TypeScript
85 lines
1.8 KiB
TypeScript
import type { CardProps } from "@mantine/core";
|
|
import { Card, useComputedColorScheme, useMantineTheme } from "@mantine/core";
|
|
import type { ReactNode } from "react";
|
|
|
|
interface HelpCardProps extends CardProps {
|
|
children: ReactNode;
|
|
icon?: ReactNode;
|
|
title?: string;
|
|
minHeight?: string | number; // Allow specifying a minimum height
|
|
}
|
|
|
|
export const HelpCard = ({
|
|
children,
|
|
icon,
|
|
title,
|
|
minHeight = "auto", // Default to auto, but allow override
|
|
...props
|
|
}: HelpCardProps) => {
|
|
const theme = useMantineTheme();
|
|
const colorScheme = useComputedColorScheme("light");
|
|
const isDark = colorScheme === "dark";
|
|
|
|
return (
|
|
<Card
|
|
shadow="sm"
|
|
padding="xl"
|
|
radius="md"
|
|
withBorder
|
|
style={{
|
|
backgroundColor: isDark ? theme.colors.dark[7] : theme.white,
|
|
borderRadius: "16px",
|
|
transition: "transform 0.2s ease, box-shadow 0.2s ease",
|
|
border: `1px solid ${
|
|
isDark ? theme.colors.dark[4] : theme.colors.gray[3]
|
|
}`,
|
|
minHeight, // Apply the minimum height
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
{...props}
|
|
>
|
|
{(icon || title) && (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "12px",
|
|
marginBottom: "16px",
|
|
}}
|
|
>
|
|
{icon && (
|
|
<div
|
|
style={{
|
|
backgroundColor: isDark ? "#263852ff" : "#1E3A5F",
|
|
borderRadius: "8px",
|
|
padding: "8px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
{icon}
|
|
</div>
|
|
)}
|
|
|
|
{title && (
|
|
<h3
|
|
style={{
|
|
margin: 0,
|
|
fontSize: "16px",
|
|
fontWeight: 600,
|
|
color: isDark ? theme.colors.dark[0] : theme.colors.dark[9],
|
|
}}
|
|
>
|
|
{title}
|
|
</h3>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div style={{ flex: 1 }}>{children}</div>
|
|
</Card>
|
|
);
|
|
};
|