From 96bc5ade615a0d50088aeb3035f1a05dbcc445b8 Mon Sep 17 00:00:00 2001
From: Bram Suurd <contact@bramsuurd.nl>
Date: Wed, 6 Nov 2024 20:15:01 +0100
Subject: [PATCH] Enhance `ScriptItem` component to display correct type naming
 alongside script name for better clarity in the UI

---
 frontend/src/app/scripts/_components/ScriptItem.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/scripts/_components/ScriptItem.tsx b/frontend/src/app/scripts/_components/ScriptItem.tsx
index b6e98c40..2d8b2111 100644
--- a/frontend/src/app/scripts/_components/ScriptItem.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItem.tsx
@@ -5,6 +5,7 @@ import { Script } from "@/lib/types";
 import { X } from "lucide-react";
 import Image from "next/image";
 
+import { getCorrectTypeNaming } from "./ScriptInfoBlocks";
 import Alerts from "./ScriptItems/Alerts";
 import Buttons from "./ScriptItems/Buttons";
 import DefaultPassword from "./ScriptItems/DefaultPassword";
@@ -51,7 +52,7 @@ function ScriptItem({
                 <div className="ml-4 flex flex-col justify-between">
                   <div className="flex h-full w-full flex-col justify-between">
                     <div>
-                      <h1 className="text-lg font-semibold">{item.name}</h1>
+                      <h1 className="text-lg font-semibold">{item.name} {getCorrectTypeNaming(item.type)}</h1>
                       <p className="w-full text-sm text-muted-foreground">
                         Date added: {extractDate(item.date_created)}
                       </p>