konnosDashboard
FeaturePreviewSidebarPanel.tsx39 lines · main
1import { ReactNode } from 'react'
2import { cn } from 'ui'
3
4interface FeaturePreviewSidebarPanelProps {
5 title: string
6 description: string
7 illustration?: ReactNode
8 actions?: ReactNode
9 className?: string
10}
11
12export function FeaturePreviewSidebarPanel({
13 title,
14 description,
15 illustration,
16 actions,
17 className,
18}: FeaturePreviewSidebarPanelProps) {
19 return (
20 <div
21 className={cn(
22 'rounded-lg border p-4 space-y-3',
23 'bg-muted/10 border-border/50',
24 // Force left alignment and override any centering
25 'text-left **:text-left [&_div]:items-start',
26 className
27 )}
28 >
29 {illustration && <div className="flex justify-start items-start">{illustration}</div>}
30
31 <div className="space-y-1">
32 <h3 className="font-medium text-sm text-foreground">{title}</h3>
33 <p className="text-xs text-foreground-light">{description}</p>
34 </div>
35
36 {actions && <div className="flex justify-start items-start gap-x-2">{actions}</div>}
37 </div>
38 )
39}