homeio

1"use client";
2
3import {
4  ArchiveFileIcon,
5  AudioFileIcon,
6  CodeFileIcon,
7  DocumentFileIcon,
8  FolderIcon,
9  GenericFileIcon,
10  ImageFileIcon,
11  OpenFolderIcon,
12  TextFileIcon,
13  VideoFileIcon,
14} from "@/components/icons/file-icons";
15
16const ICONS = [
17  { label: "Folder", icon: FolderIcon },
18  { label: "Open Folder", icon: OpenFolderIcon },
19  { label: "Image", icon: ImageFileIcon },
20  { label: "Audio", icon: AudioFileIcon },
21  { label: "Video", icon: VideoFileIcon },
22  { label: "Archive", icon: ArchiveFileIcon },
23  { label: "Code", icon: CodeFileIcon },
24  { label: "Document", icon: DocumentFileIcon },
25  { label: "Text", icon: TextFileIcon },
26  { label: "Generic", icon: GenericFileIcon },
27];
28
29export default function IconsDevPage() {
30  return (
31    <div className="min-h-screen bg-[#1a1a1a] p-12">
32      <h1 className="mb-2 text-2xl font-bold text-white">File Icons</h1>
33      <p className="mb-10 text-sm text-white/40">
34        Colors follow <code className="rounded bg-white/10 px-1.5 py-0.5">--accent</code> CSS variable
35      </p>
36
37      {/* Large */}
38      <section className="mb-12">
39        <h2 className="mb-4 text-xs font-semibold uppercase tracking-widest text-white/30">
40          Large — size-14 (56 px)
41        </h2>
42        <div className="flex flex-wrap gap-8">
43          {ICONS.map(({ label, icon: Icon }) => (
44            <div key={label} className="flex flex-col items-center gap-2">
45              <Icon className="size-14" />
46              <span className="text-[11px] text-white/50">{label}</span>
47            </div>
48          ))}
49        </div>
50      </section>
51
52      {/* Medium */}
53      <section className="mb-12">
54        <h2 className="mb-4 text-xs font-semibold uppercase tracking-widest text-white/30">
55          Medium — size-8 (32 px)
56        </h2>
57        <div className="flex flex-wrap gap-6">
58          {ICONS.map(({ label, icon: Icon }) => (
59            <div key={label} className="flex flex-col items-center gap-2">
60              <Icon className="size-8" />
61              <span className="text-[11px] text-white/50">{label}</span>
62            </div>
63          ))}
64        </div>
65      </section>
66
67      {/* Small */}
68      <section className="mb-12">
69        <h2 className="mb-4 text-xs font-semibold uppercase tracking-widest text-white/30">
70          Small — size-5 (20 px)
71        </h2>
72        <div className="flex flex-wrap items-center gap-5">
73          {ICONS.map(({ label, icon: Icon }) => (
74            <div key={label} className="flex flex-col items-center gap-2">
75              <Icon className="size-5" />
76              <span className="text-[11px] text-white/50">{label}</span>
77            </div>
78          ))}
79        </div>
80      </section>
81
82      {/* In context — simulated grid row */}
83      <section>
84        <h2 className="mb-4 text-xs font-semibold uppercase tracking-widest text-white/30">
85          In context — grid
86        </h2>
87        <div className="flex flex-wrap gap-3">
88          {[
89            { label: "Documents", icon: FolderIcon },
90            { label: "photo.jpg", icon: ImageFileIcon },
91            { label: "song.mp3", icon: AudioFileIcon },
92            { label: "movie.mp4", icon: VideoFileIcon },
93            { label: "archive.zip", icon: ArchiveFileIcon },
94            { label: "index.ts", icon: CodeFileIcon },
95            { label: "report.pdf", icon: DocumentFileIcon },
96            { label: "notes.txt", icon: TextFileIcon },
97            { label: "unknown.bin", icon: GenericFileIcon },
98          ].map(({ label, icon: Icon }) => (
99            <div
100              key={label}
101              className="flex w-24 cursor-pointer flex-col items-center gap-3 rounded-xl border border-transparent p-4 hover:bg-white/5"
102            >
103              <Icon className="size-14" />
104              <span className="line-clamp-2 break-all text-center text-[12px] font-medium text-white/70">
105                {label}
106              </span>
107            </div>
108          ))}
109        </div>
110      </section>
111    </div>
112  );
113}
114