Understanding AI & Prompt Engineering: Sidebar UI

app/(dashboard)/journal/[id]/page.tsx

@@ -18,10 +18,36 @@ const getEntry = async (id: any) => {
 
 const EntryPage = async ({ params }: any) => {
   const entry = await getEntry(params.id);
+  const analysisData = [
+    { name: 'Summary', value: '' },
+    { name: 'Subject', value: '' },
+    { name: 'Mood', value: '' },
+    { name: 'Negative', value: 'False' },
+  ];
 
   return (
-    <div className="w-full h-full">
-      <Editor entry={entry} />
+    <div className="w-full h-full grid grid-cols-3">
+      <div className="col-span-2">
+        <Editor entry={entry} />
+      </div>
+      <div className="border-l border-black/10">
+        <div className="bg-blue-300 px-6 py-10">
+          <h2 className="text-2xl">Analysis</h2>
+        </div>
+        <div>
+          <ul>
+            {analysisData.map((item) => (
+              <li
+                className="px-2 py-4 flex items-center justify-between border-b border-t border-black/10"
+                key={item.name}
+              >
+                <span className="text-lg font-semibold">{item.name}</span>
+                <span>{item.value}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
     </div>
   );
 };