Textareas

1'use client';
2import { useState, 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 TextareasSection() {
29  const [text, setText] = useState('');
30  const maxChars = 200;
31  const remaining = maxChars - text.length;
32
33  return (
34    <SectionCard title="Textareas" sourceSlug="/ui/source/ui-elements/textareas">
35      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl">
36        {/* Default */}
37        <div>
38          <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Default Textarea</label>
39          <textarea rows={3} placeholder="Write your message..." 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 resize-none transition-colors" />
40        </div>
41        {/* With Character Count */}
42        <div>
43          <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">With Character Count</label>
44          <textarea rows={3} value={text} onChange={(e) => setText(e.target.value.slice(0, maxChars))} placeholder="Type here..." 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 resize-none transition-colors" />
45          <div className="mt-1 flex justify-between">
46            <p className="text-xs text-gray-400 dark:text-gray-500">Share your thoughts</p>
47            <p className={`text-xs ${remaining < 20 ? 'text-warning-500' : remaining < 0 ? 'text-error-500' : 'text-gray-400 dark:text-gray-500'}`}>{text.length}/{maxChars}</p>
48          </div>
49        </div>
50      </div>
51    </SectionCard>
52  );
53}