Create HGTX PromptLab UI

2025-10-29 12:06:30 +00:00
parent d712cc7bb5
commit 6efb71b59b
13 changed files with 784 additions and 59 deletions
@@ -0,0 +1,124 @@
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { RotateCcw, GitBranch } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export default function History() {
+  const versions = [
+    {
+      id: 1,
+      version: "v2.1",
+      author: "João Silva",
+      date: "2 dias atrás",
+      summary: "Melhorias na formatação de respostas e tom mais amigável",
+      current: true,
+    },
+    {
+      id: 2,
+      version: "v2.0",
+      author: "João Silva",
+      date: "1 semana atrás",
+      summary: "Adicionado contexto sobre produtos lançados em 2024",
+      current: false,
+    },
+    {
+      id: 3,
+      version: "v1.9",
+      author: "Maria Santos",
+      date: "2 semanas atrás",
+      summary: "Ajustes no limite de caracteres da resposta",
+      current: false,
+    },
+    {
+      id: 4,
+      version: "v1.8",
+      author: "Pedro Costa",
+      date: "3 semanas atrás",
+      summary: "Versão inicial com estrutura básica do prompt",
+      current: false,
+    },
+  ];
+
+  return (
+    <div className="animate-fade-in max-w-4xl mx-auto">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-foreground mb-2">Histórico de Versões</h1>
+        <p className="text-muted-foreground">
+          Visualize e restaure versões anteriores dos seus prompts
+        </p>
+      </div>
+
+      <Card className="p-6 mb-6">
+        <div className="flex items-center gap-4">
+          <div className="flex-1">
+            <label className="text-sm font-medium text-foreground mb-2 block">
+              Selecione o Prompt
+            </label>
+            <Select defaultValue="atendimento">
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="atendimento">Prompt de Atendimento</SelectItem>
+                <SelectItem value="vendas">Prompt de Vendas</SelectItem>
+                <SelectItem value="analise">Prompt de Análise</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </Card>
+
+      <div className="relative">
+        <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-border" />
+
+        <div className="space-y-6">
+          {versions.map((version) => (
+            <div key={version.id} className="relative pl-16 animate-fade-in">
+              <div
+                className={`absolute left-6 w-5 h-5 rounded-full border-2 ${
+                  version.current
+                    ? "bg-primary border-primary"
+                    : "bg-background border-border"
+                }`}
+              />
+
+              <Card className="p-5 hover:shadow-hover transition-shadow">
+                <div className="flex items-start justify-between mb-3">
+                  <div className="flex items-center gap-3">
+                    <Badge variant={version.current ? "default" : "secondary"}>
+                      {version.version}
+                    </Badge>
+                    {version.current && (
+                      <Badge variant="outline" className="gap-1">
+                        <GitBranch className="h-3 w-3" />
+                        Atual
+                      </Badge>
+                    )}
+                  </div>
+                  {!version.current && (
+                    <Button variant="outline" size="sm" className="gap-2">
+                      <RotateCcw className="h-4 w-4" />
+                      Restaurar
+                    </Button>
+                  )}
+                </div>
+
+                <p className="text-foreground font-medium mb-2">{version.summary}</p>
+                <p className="text-sm text-muted-foreground">
+                  por {version.author} • {version.date}
+                </p>
+              </Card>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}