43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Text } from '@/ui/Text';
|
|
import { HelpCircle } from 'lucide-react';
|
|
|
|
interface OnboardingHelpPanelProps {
|
|
title?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* OnboardingHelpPanel
|
|
*
|
|
* A semantic panel for providing contextual help or information during onboarding.
|
|
* Usually placed in the sidebar.
|
|
*/
|
|
export function OnboardingHelpPanel({ title = 'Need Help?', children }: OnboardingHelpPanelProps) {
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="xl"
|
|
border
|
|
padding={6}
|
|
borderColor="border-charcoal-outline"
|
|
bg="bg-deep-charcoal/30"
|
|
>
|
|
<Stack gap={4}>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={HelpCircle} size={4} color="text-primary-blue" />
|
|
<Text size="sm" weight="bold" color="text-white" uppercase letterSpacing="wider">
|
|
{title}
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Text size="sm" color="text-gray-400">
|
|
{children}
|
|
</Text>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|