clean

UoaWDCC · Aug 15, 2023 · 36b3f21 · 36b3f21
1 parent 9153ec4
commit 36b3f21
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 30 deletions.
diff --git a/src/app/direct-debit/page.tsx b/src/app/direct-debit/page.tsx
@@ -31,18 +31,16 @@ export default function DirectDebitPage() {
         <div className="flex flex-col overflow-y-auto w-full gap-4 bg-bottom h-[calc(100dvh-460px)] max-h-[248px]">
           <DebitDetailsCard
             title="Account Number:"
-            text={[accountNumber]}
-            copy={true}
+            subtitle={accountNumber}
             onClick={() => {
               navigator.clipboard.writeText(accountNumber);
             }}
           />
 
           <DebitDetailsCard
             title="Reference:"
-            text={[firstName + " " + lastName]}
+            subtitle={`${firstName} ${lastName}`}
             sessionId={sessionId}
-            copy={true}
             onClick={() => {
               navigator.clipboard.writeText(sessionId);
             }}

diff --git a/src/components/DebitDetailsCard/DebitDetailsCard.tsx b/src/components/DebitDetailsCard/DebitDetailsCard.tsx
@@ -6,35 +6,29 @@ import Card from "../Card/Card";
 import DebitDetailsCardProps from "./DebitDetailsCardProps";
 import { MdContentCopy } from "react-icons/md";
 
-const DebitDetailsCard = ({title, text, sessionId, onClick, copy}: DebitDetailsCardProps) => {
+const DebitDetailsCard = ({
+  title,
+  subtitle,
+  sessionId,
+  onClick,
+}: DebitDetailsCardProps) => {
   return (
-    <Card className="bg-gray-200 p-5 mt-0 pt-50 relative">
+    <Card className="bg-gray-200 font-normal p-5 mt-0 pt-50 relative">
       <p className="font-medium text-xl top-5">{title}</p>
-
-      {text.map((text, index) => {
-        return (
-          <p className="font-normal text-gray-500" key={index}>
-            {text}
-          </p>
-        );
-      })}
+      <p className="text-gray-500">{subtitle}</p>
 
       {sessionId && (
-        <>
-          <br />
-          <p className="font-normal blueGray-200 inline">SessionID: </p>
-          <p className="font-bold blueGray-200 inline">{sessionId}</p>
-        </>
-      )}
-
-      {copy && (
-        <button
-          onPointerDown={onClick}
-          className="absolute right-4 top-1/2 translate-y-[-50%] p-2 rounded-lg"
-        >
-          <MdContentCopy className="text-3xl" />
-        </button>
+        <p className="pt-5 blueGray-200">
+          SessionID: <span className="font-bold">{sessionId}</span>
+        </p>
       )}
+      {/* Clipboard button is positioned absolute relative to the parent card container */}
+      <button
+        onPointerDown={onClick}
+        className="absolute right-4 top-1/2 translate-y-[-50%] p-2 rounded-lg"
+      >
+        <MdContentCopy className="text-3xl" />
+      </button>
     </Card>
   );
 };

diff --git a/src/components/DebitDetailsCard/DebitDetailsCardProps.tsx b/src/components/DebitDetailsCard/DebitDetailsCardProps.tsx
@@ -4,9 +4,8 @@
 
 type DebitDetailsCardProps = {
   title: string;
-  text: string[];
+  subtitle: string;
   sessionId?: string;
-  copy?: boolean; // TODO: redundant
   onClick?: () => void;
 };