wehub-resource-sync
69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
import { cn } from "~/utils/cn";
|
|
import { Header2 } from "./Headers";
|
|
import { Paragraph } from "./Paragraph";
|
|
import { type ReactNode } from "react";
|
|
|
|
const variants = {
|
|
info: {
|
|
panelStyle: "border-grid-bright bg-background-bright rounded-md border p-4 gap-3",
|
|
},
|
|
upgrade: {
|
|
panelStyle: "border-indigo-400/20 bg-indigo-800/10 rounded-md border p-4 gap-3",
|
|
},
|
|
minimal: {
|
|
panelStyle: "max-w-full w-full py-3 px-3 gap-2",
|
|
},
|
|
};
|
|
|
|
type InfoPanelVariant = keyof typeof variants;
|
|
|
|
type Props = {
|
|
title?: string;
|
|
children: React.ReactNode;
|
|
accessory?: ReactNode;
|
|
icon: React.ComponentType<any>;
|
|
iconClassName?: string;
|
|
variant?: InfoPanelVariant;
|
|
panelClassName?: string;
|
|
};
|
|
|
|
export function InfoPanel({
|
|
title,
|
|
children,
|
|
accessory,
|
|
icon,
|
|
iconClassName,
|
|
variant = "info",
|
|
panelClassName = "max-w-sm",
|
|
}: Props) {
|
|
const Icon = icon;
|
|
const variantStyle = variants[variant];
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
variantStyle.panelStyle,
|
|
title ? "flex-col" : "",
|
|
"flex h-fit items-start",
|
|
panelClassName
|
|
)}
|
|
>
|
|
<div className={cn("flex items-center gap-2", accessory ? "w-full justify-between" : "")}>
|
|
<Icon className={cn("size-5", iconClassName)} />
|
|
|
|
{accessory}
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
{title && <Header2 className="text-text-bright">{title}</Header2>}
|
|
{typeof children === "string" ? (
|
|
<Paragraph variant={"small"} className="text-text-dimmed">
|
|
{children}
|
|
</Paragraph>
|
|
) : (
|
|
children
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|