From 126b5646765dc7bdca4e072c8061560ecce4abd5 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Wed, 31 May 2023 11:12:28 +0100
Subject: [PATCH] Added missing PartCard

---
 src/app/components/property/PartCard.tsx | 36 ++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/app/components/property/PartCard.tsx

diff --git a/src/app/components/property/PartCard.tsx b/src/app/components/property/PartCard.tsx
new file mode 100644
index 0000000..92691e6
--- /dev/null
+++ b/src/app/components/property/PartCard.tsx
@@ -0,0 +1,36 @@
+import { PencilSquareIcon } from "@heroicons/react/24/outline";
+import { useState } from "react";
+import PartModal from "./PartModal";
+
+export default function PartCard({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
+
+  return (
+    <section>
+      <div className="mt-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-bold">{title}</h2>
+          <button
+            className="flex items-center text-brandmidblue hover:text-brandblue transition-colors duration-200 cursor-pointer"
+            onClick={() => setIsDetailModalOpen(true)}
+          >
+            <PencilSquareIcon className="h-6 w-6 ml-2" />
+            Edit
+          </button>
+        </div>
+        <p className="text-gray-600">{description}</p>
+      </div>
+      <PartModal
+        isOpen={isDetailModalOpen}
+        setIsOpen={setIsDetailModalOpen}
+        title={title}
+      />
+    </section>
+  );
+}