first commit

src/components/processos/ProcessoInfo.tsx

@@ -0,0 +1,54 @@
+import { format } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import { DatajudProcesso } from "../../types/datajud";
+
+interface ProcessoInfoProps {
+  data: DatajudProcesso;
+}
+
+export const ProcessoInfo = ({ data }: ProcessoInfoProps) => {
+  return (
+    <div className="bg-white rounded-lg shadow p-6 space-y-4">
+      <div className="grid grid-cols-2 gap-4">
+        <InfoItem label="Classe" value={data.classe.nome} />
+        <InfoItem
+          label="Data de Ajuizamento"
+          value={format(new Date(data.dataAjuizamento), "dd/MM/yyyy", {
+            locale: ptBR,
+          })}
+        />
+        <InfoItem label="Grau" value={data.grau} />
+        <InfoItem label="Formato" value={data.formato.nome} />
+        <InfoItem label="Sistema" value={data.sistema.nome} />
+        <InfoItem label="Órgão Julgador" value={data.orgaoJulgador.nome} />
+      </div>
+
+      {data.assuntos.length > 0 && (
+        <div className="mt-4">
+          <h4 className="font-medium text-gray-700 mb-2">Assuntos</h4>
+          <div className="flex flex-wrap gap-2">
+            {data.assuntos.map((assunto) => (
+              <span
+                key={assunto.codigo}
+                className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
+              >
+                {assunto.nome}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+function InfoItem({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <dt className="text-sm font-medium text-gray-500">{label}</dt>
+      <dd className="mt-1 text-sm text-gray-900">{value}</dd>
+    </div>
+  );
+}
+
+export default ProcessoInfo;