From 841f3c70c68a7dc004a1ee1a2a925aa7e21332e2 Mon Sep 17 00:00:00 2001
From: "Bryson G." <bryson.glembin@gmail.com>
Date: Sat, 7 Dec 2024 14:00:34 -0800
Subject: [PATCH] refactor(dashboard): global details component

should be used to unify the design and codebase in the future.
---
 .../src/app/[tenantId]/components/Details.tsx | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 dashboard/src/app/[tenantId]/components/Details.tsx

diff --git a/dashboard/src/app/[tenantId]/components/Details.tsx b/dashboard/src/app/[tenantId]/components/Details.tsx
new file mode 100644
index 000000000..26874a1ca
--- /dev/null
+++ b/dashboard/src/app/[tenantId]/components/Details.tsx
@@ -0,0 +1,37 @@
+import { TagIcon } from 'lucide-react'
+import { FC } from 'react'
+import { Versions } from '../userTaskDef/[...props]/components/Versions'
+
+export type DetailsProps = {
+  itemHeader: string
+  header: string
+  version?: number[]
+  status?: string
+  description?: Record<string, string | React.ReactNode>
+}
+
+export const Details: FC<DetailsProps> = ({ itemHeader, header, version, status, description }) => {
+  return (
+    <div>
+      <div className="mb-4">
+        <span className="italic">{itemHeader}</span>
+        <h1 className="block text-2xl font-bold">{header}</h1>
+        <div className="flex flex-row gap-2 text-sm text-gray-500">
+          {version && version.length > 1 ? (
+            <div className="flex items-center gap-2">
+              <TagIcon className="h-5 w-5" />
+              {version[0]}
+            </div>
+          ) : null}
+        </div>
+        {description &&
+          Object.entries(description).map(([key, value]) => (
+            <div key={key}>
+              <b>{key}</b>: {value}
+            </div>
+          ))}
+        {status && <div className="italic text-gray-400">{status}</div>}
+      </div>
+    </div>
+  )
+}