Data Tags

1'use client';
2import { type ReactNode } from 'react';
3import Link from 'next/link';
4import { Code2, Type } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function DataTagsSection() {
29  const dataTags = [
30    { key: 'Status', value: 'Active', color: 'bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-500' },
31    { key: 'Priority', value: 'High', color: 'bg-error-50 text-error-600 dark:bg-error-500/15 dark:text-error-500' },
32    { key: 'Type', value: 'Feature', color: 'bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-400' },
33    { key: 'Assignee', value: 'Alex M.', color: 'bg-blue-light-50 text-blue-light-600 dark:bg-blue-light-500/15 dark:text-blue-light-500' },
34    { key: 'Sprint', value: 'Q1-2024', color: 'bg-warning-50 text-warning-600 dark:bg-warning-500/15 dark:text-warning-500' },
35    { key: 'Estimate', value: '8 pts', color: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300' },
36  ];
37
38  return (
39    <SectionCard title="Data Tags" sourceSlug="/ui/source/ui-elements/data-tags">
40      <div className="space-y-4">
41        {/* Key-Value Pairs */}
42        <div className="flex flex-wrap gap-2">
43          {dataTags.map((tag) => (
44            <div key={tag.key} className={`inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 ${tag.color}`}>
45              <span className="text-[10px] font-semibold uppercase opacity-70">{tag.key}:</span>
46              <span className="text-xs font-medium">{tag.value}</span>
47            </div>
48          ))}
49        </div>
50        {/* Metadata Row */}
51        <div className="flex flex-wrap gap-x-6 gap-y-2 rounded-lg border border-gray-200 p-3 dark:border-white/5">
52          {[
53            { key: 'Created', value: 'Jan 15, 2024' },
54            { key: 'Updated', value: '2 hours ago' },
55            { key: 'Author', value: 'Sarah Chen' },
56            { key: 'Version', value: 'v2.4.1' },
57          ].map((item) => (
58            <div key={item.key} className="flex items-center gap-2">
59              <span className="text-xs font-medium text-gray-400 dark:text-gray-500">{item.key}</span>
60              <span className="text-xs font-semibold text-gray-700 dark:text-gray-300">{item.value}</span>
61            </div>
62          ))}
63        </div>
64      </div>
65    </SectionCard>
66  );
67}