Text Inputs

1'use client';
2import { type ReactNode } from 'react';
3import Link from 'next/link';
4import { CheckCircle, XCircle, Mail, 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 TextInputsSection() {
29  return (
30    <SectionCard title="Text Inputs" sourceSlug="/ui/source/ui-elements/text-inputs">
31      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl">
32        {/* Default */}
33        <div>
34          <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Default Input</label>
35          <input type="text" placeholder="Enter your name" className="w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-800 placeholder-gray-400 outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 dark:border-white/10 dark:bg-gray-800 dark:text-white/90 dark:placeholder-gray-500 dark:focus:border-brand-400 transition-colors" />
36        </div>
37        {/* With Icon */}
38        <div>
39          <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">With Icon</label>
40          <div className="relative">
41            <Mail className="absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
42            <input type="email" placeholder="Email address" className="w-full rounded-xl border border-gray-300 bg-white py-2.5 pl-10 pr-4 text-sm text-gray-800 placeholder-gray-400 outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 dark:border-white/10 dark:bg-gray-800 dark:text-white/90 dark:placeholder-gray-500 dark:focus:border-brand-400 transition-colors" />
43          </div>
44        </div>
45        {/* Validation States */}
46        <div>
47          <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Success State</label>
48          <div className="relative">
49            <input type="text" defaultValue="valid@email.com" className="w-full rounded-xl border border-success-500 bg-white px-4 py-2.5 text-sm text-gray-800 outline-none focus:ring-2 focus:ring-success-500/20 dark:border-success-500 dark:bg-gray-800 dark:text-white/90 transition-colors" />
50            <CheckCircle className="absolute right-3.5 top-1/2 size-4 -translate-y-1/2 text-success-500" />
51          </div>
52          <p className="mt-1 text-xs text-success-500">Email is valid</p>
53        </div>
54        <div>
55          <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Error State</label>
56          <div className="relative">
57            <input type="text" defaultValue="invalid" className="w-full rounded-xl border border-error-500 bg-white px-4 py-2.5 text-sm text-gray-800 outline-none focus:ring-2 focus:ring-error-500/20 dark:border-error-500 dark:bg-gray-800 dark:text-white/90 transition-colors" />
58            <XCircle className="absolute right-3.5 top-1/2 size-4 -translate-y-1/2 text-error-500" />
59          </div>
60          <p className="mt-1 text-xs text-error-500">Please enter a valid email</p>
61        </div>
62        {/* Disabled */}
63        <div>
64          <label className="mb-1.5 block text-sm font-medium text-gray-400 dark:text-gray-500">Disabled Input</label>
65          <input type="text" disabled placeholder="Cannot edit" className="w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-2.5 text-sm text-gray-400 cursor-not-allowed dark:border-white/5 dark:bg-gray-900 dark:text-gray-600" />
66        </div>
67        {/* With Helper Text */}
68        <div>
69          <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">With Helper</label>
70          <input type="password" placeholder="Create a password" className="w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-800 placeholder-gray-400 outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 dark:border-white/10 dark:bg-gray-800 dark:text-white/90 dark:placeholder-gray-500 dark:focus:border-brand-400 transition-colors" />
71          <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">Must be at least 8 characters long</p>
72        </div>
73      </div>
74    </SectionCard>
75  );
76}