From 9e6958ce3bb6bb5a36955b0ad751b1bbff40eff7 Mon Sep 17 00:00:00 2001
From: Arif Rahman Hakim <new.arifrh199@gmail.com>
Date: Tue, 27 Aug 2024 11:45:59 +0800
Subject: [PATCH] style: add column type image when create/update service

---
 src/components/service/ServiceItem.tsx | 21 ++++++++++++---------
 src/pages/CreateServicePage.tsx        |  3 +++
 src/pages/DetailServicePage.tsx        |  4 ++++
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/service/ServiceItem.tsx b/src/components/service/ServiceItem.tsx
index 4b30705..94986c6 100644
--- a/src/components/service/ServiceItem.tsx
+++ b/src/components/service/ServiceItem.tsx
@@ -66,12 +66,15 @@ const ServiceItem = ({ service, onItemDeleted }: ServiceItemProps) => {
 
   return (
     <div className="relative bg-white border rounded-md drop-shadow-sm gap-2 flex flex-col ">
-      <Image
-        preview={false}
-        height={48}
-        src={service.imageUrl}
-      />
-      <div className="p-5">
+      {!service.hasLogo ? (
+        <Image
+          className="object-cover object-top"
+          height={100}
+          preview={false}
+          src={service.imageUrl}
+        />
+      ) : null}
+      <div className="p-5 flex flex-1 flex-col">
         <Dropdown
           menu={{
             items: [
@@ -107,7 +110,7 @@ const ServiceItem = ({ service, onItemDeleted }: ServiceItemProps) => {
             size="small"
           />
         </Dropdown>
-        <div>
+        <div className="flex-1 flex items-center">
           {service.hasLogo ? (
             <Image
               preview={false}
@@ -117,12 +120,12 @@ const ServiceItem = ({ service, onItemDeleted }: ServiceItemProps) => {
             />
           ) : null}
         </div>
-        <div className="flex flex-col justify-center flex-1">
+        <div className="flex flex-col flex-1">
           <div className="text-lg text-black font-semibold">{service.name}</div>
           <div className="text-sm text-gray-500 line-clamp-2 mb-5">
             {service.description}
           </div>
-          <div className=" flex flex-col gap-2 mt-auto">
+          <div className=" flex flex-col gap-2">
             <Button type="primary" onClick={() => handleClick(service.link)}>
               Lihat
             </Button>
diff --git a/src/pages/CreateServicePage.tsx b/src/pages/CreateServicePage.tsx
index 226a34e..2b7c4f6 100644
--- a/src/pages/CreateServicePage.tsx
+++ b/src/pages/CreateServicePage.tsx
@@ -202,6 +202,9 @@ const CreateServicePage = () => {
                 <Button icon={<UploadOutlined />}>Click to Upload</Button>
               </Upload>
             </Form.Item>
+            <Form.Item name="hasLogo" valuePropName="checked">
+              <Checkbox>Apakah berupa logo?</Checkbox>
+            </Form.Item>
           </Card.Grid>
           <Card.Grid
             style={{
diff --git a/src/pages/DetailServicePage.tsx b/src/pages/DetailServicePage.tsx
index b9c3305..7290ba6 100644
--- a/src/pages/DetailServicePage.tsx
+++ b/src/pages/DetailServicePage.tsx
@@ -62,6 +62,7 @@ const DetailServicePage = () => {
         teams: service.teams.map((item: { team: Team }) => item.team.id),
         tags: service.tags,
         image: service.imageUrl,
+        hasLogo: service.hasLogo,
         username: service.credential?.username,
         password: service.credential?.password,
         note: service.credential?.note,
@@ -247,6 +248,9 @@ const DetailServicePage = () => {
                 />
               </Upload>
             </Form.Item>
+            <Form.Item name="hasLogo" valuePropName="checked">
+              <Checkbox>Apakah berupa logo?</Checkbox>
+            </Form.Item>
           </Card.Grid>
           <Card.Grid
             style={{