Dividers

1'use client';
2import { type ReactNode } from 'react';
3import Link from 'next/link';
4import { Star, 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 DividersSection() {
29  return (
30    <SectionCard title="Dividers" sourceSlug="/ui/source/ui-elements/dividers">
31      <div className="space-y-5">
32        {/* Simple Divider */}
33        <div>
34          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Simple</p>
35          <hr className="border-gray-200 dark:border-white/10" />
36        </div>
37        {/* Dashed Divider */}
38        <div>
39          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Dashed</p>
40          <hr className="border-dashed border-gray-300 dark:border-white/10" />
41        </div>
42        {/* Divider with Label */}
43        <div>
44          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">With Label</p>
45          <div className="flex items-center gap-4">
46            <div className="flex-1 border-t border-gray-200 dark:border-white/10" />
47            <span className="text-xs font-medium text-gray-400 dark:text-gray-500">OR</span>
48            <div className="flex-1 border-t border-gray-200 dark:border-white/10" />
49          </div>
50        </div>
51        {/* Divider with Icon */}
52        <div>
53          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">With Icon</p>
54          <div className="flex items-center gap-4">
55            <div className="flex-1 border-t border-gray-200 dark:border-white/10" />
56            <Star className="size-4 text-brand-500" />
57            <div className="flex-1 border-t border-gray-200 dark:border-white/10" />
58          </div>
59        </div>
60        {/* Gradient Divider */}
61        <div>
62          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Gradient</p>
63          <div className="h-px bg-gradient-to-r from-transparent via-brand-500 to-transparent" />
64        </div>
65      </div>
66    </SectionCard>
67  );
68}