File

1import { cn } from "@/lib/utils";
2import { SourceCodeIcon } from "@hugeicons/core-free-icons";
3import { HugeiconsIcon } from "@hugeicons/react";
4 
5type FileProps = {
6  className?: string;
7  title: string;
8  description: string;
9  icon?: React.ReactNode;
10} & React.HTMLProps<HTMLDivElement>;
11 
12export function File({
13  className,
14  title,
15  description,
16  icon,
17  ...props
18}: FileProps) {
19  return (
20    <div
21      className={cn(
22        "inline-flex items-center gap-2 rounded-lg bg-muted px-3 py-3 hover:bg-muted/80 transition border cursor-pointer",
23        className
24      )}
25      {...props}
26    >
27      {icon ?? (
28        <HugeiconsIcon
29          icon={SourceCodeIcon}
30          className="w-8 h-8 text-muted-foreground"
31        />
32      )}
33      <div className="flex flex-col leading-tight">
34        <span className="text-sm font-medium text-foreground">{title}</span>
35        <span className="text-xs text-muted-foreground">{description}</span>
36      </div>
37    </div>
38  );
39}