48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { ChevronRightIcon } from "@repo/rdx-ui/lib/icons";
|
|
import { Button } from "@repo/shadcn-ui/components/button";
|
|
import type { ReactNode } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export function DashboardPanel({
|
|
title,
|
|
icon,
|
|
action,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
icon?: ReactNode;
|
|
action?: () => void;
|
|
children: ReactNode;
|
|
}) {
|
|
const { t } = useTranslation("companies");
|
|
return (
|
|
<section
|
|
aria-label={title}
|
|
className="min-w-0 rounded-panel border border-border bg-card p-4 shadow-[0_1px_2px_color-mix(in_srgb,var(--foreground)_5%,transparent)] shell:p-5"
|
|
>
|
|
<div className="mb-4 flex items-center justify-between gap-3">
|
|
<h2 className="flex items-center gap-3 text-base font-semibold">
|
|
{icon && (
|
|
<span aria-hidden="true" className="[&_svg]:size-5">
|
|
{icon}
|
|
</span>
|
|
)}
|
|
{title}
|
|
</h2>
|
|
{action && (
|
|
<Button
|
|
className="app-link text-primary hover:text-primary shrink-0"
|
|
onClick={action}
|
|
size="sm"
|
|
variant="ghost"
|
|
>
|
|
{t("dashboard.viewAll")}
|
|
<ChevronRightIcon aria-hidden="true" className="size-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|