🚀 Auto-deploy: BrainWind atualizado em 14/07/2026 15:18:53

2026-07-14 15:18:53 +00:00
parent c07016ab82
commit 4e0b26f1c4
14 changed files with 1580 additions and 158 deletions
@@ -0,0 +1,87 @@
+import React, { useState, useMemo } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Search, BookOpen } from 'lucide-react';
+import { nbr6123Glossary } from '@/data/glossary';
+
+const Glossary: React.FC = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const filteredTerms = useMemo(() => {
+    const termLower = searchTerm.toLowerCase();
+    return nbr6123Glossary.filter(item => {
+      if (item.term.toLowerCase().includes(termLower)) return true;
+      if (item.definition.toLowerCase().includes(termLower)) return true;
+      if (item.tags.some(t => t.toLowerCase().includes(termLower))) return true;
+      if (item.reference.toLowerCase().includes(termLower)) return true;
+      return false;
+    });
+  }, [searchTerm]);
+
+  return (
+    <div className="space-y-6">
+      <Card className="border-border shadow-sm bg-card/50">
+        <CardHeader className="pb-4">
+          <div className="flex items-center gap-2">
+            <div className="p-2 bg-primary/10 rounded-lg">
+              <BookOpen className="w-5 h-5 text-primary" />
+            </div>
+            <div>
+              <CardTitle className="text-xl">Glossário NBR 6123</CardTitle>
+              <CardDescription>
+                Dicionário técnico com termos aerodinâmicos e variáveis normativas explicadas de forma didática.
+              </CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Buscar termo, sigla (ex: Cpe, S1) ou conceito..."
+              className="pl-10 max-w-full"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        {filteredTerms.length > 0 ? (
+          filteredTerms.map((item) => (
+            <Card key={item.id} className="overflow-hidden hover:border-primary/50 transition-colors">
+              <CardHeader className="p-4 bg-muted/20 border-b pb-3">
+                <CardTitle className="text-base text-primary flex items-center justify-between">
+                  {item.term}
+                </CardTitle>
+                <CardDescription className="text-xs text-muted-foreground font-mono mt-1">
+                  {item.reference}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="p-4">
+                <p className="text-sm leading-relaxed text-foreground/90">
+                  {item.definition}
+                </p>
+                <div className="flex flex-wrap gap-1.5 mt-4">
+                  {item.tags.map((tag, idx) => (
+                    <Badge key={idx} variant="secondary" className="text-[10px] font-normal px-2 py-0 h-5">
+                      {tag}
+                    </Badge>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          ))
+        ) : (
+          <div className="col-span-1 md:col-span-2 py-12 text-center text-muted-foreground border border-dashed rounded-lg">
+            Nenhum termo encontrado para "{searchTerm}".
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Glossary;