Code Block

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Copy, Check, Code2 } 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 CodeBlockSection() {
29  const [copied, setCopied] = useState(false);
30  const code = `const greeting = "Hello, mtverse!";
31const features = ["Dashboards", "Components", "Charts"];
32
33features.map((feature) => {
34  console.log(greeting + " - " + feature);
35});`;
36
37  const handleCopy = () => {
38    navigator.clipboard.writeText(code).then(() => {
39      setCopied(true);
40      setTimeout(() => setCopied(false), 2000);
41    });
42  };
43
44  return (
45    <SectionCard title="Code Block" sourceSlug="/ui/source/ui-elements/code-block">
46      <div className="relative max-w-xl">
47        <div className="rounded-xl bg-gray-900 dark:bg-gray-950 overflow-hidden">
48          <div className="flex items-center justify-between border-b border-white/10 px-4 py-2">
49            <div className="flex items-center gap-2">
50              <span className="size-3 rounded-full bg-error-500/80" />
51              <span className="size-3 rounded-full bg-warning-500/80" />
52              <span className="size-3 rounded-full bg-success-500/80" />
53            </div>
54            <button onClick={handleCopy} className="flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-xs text-gray-400 hover:bg-white/10 hover:text-white transition-colors">
55              {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
56              {copied ? 'Copied!' : 'Copy'}
57            </button>
58          </div>
59          <pre className="overflow-x-auto p-4 text-sm leading-relaxed">
60            <code className="text-gray-300">
61              <span className="text-blue-light-500">const</span>{' '}
62              <span className="text-brand-300">greeting</span> ={' '}
63              <span className="text-success-400">&quot;Hello, mtverse!&quot;</span>;{'\n'}
64              <span className="text-blue-light-500">const</span>{' '}
65              <span className="text-brand-300">features</span> = [{'\n'}
66              {'  '}<span className="text-success-400">&quot;Dashboards&quot;</span>,{'\n'}
67              {'  '}<span className="text-success-400">&quot;Components&quot;</span>,{'\n'}
68              {'  '}<span className="text-success-400">&quot;Charts&quot;</span>{'\n'}
69              ];{'\n'}
70              {'\n'}
71              <span className="text-brand-300">features</span>.<span className="text-warning-400">map</span>((<span className="text-brand-300">feature</span>) =&gt; {'{'}{'\n'}
72              {'  '}<span className="text-blue-light-500">console</span>.<span className="text-warning-400">log</span>(<span className="text-brand-300">greeting</span> + &quot; - &quot; + <span className="text-brand-300">feature</span>);{'\n'}
73              {'}'});
74            </code>
75          </pre>
76        </div>
77      </div>
78    </SectionCard>
79  );
80}