327 Generic information panel

client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.story.tsx

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import ProfileInformationPanel from "./ProfileInformationPanel"
+
+const meta: Meta<typeof ProfileInformationPanel> = {
+  component: ProfileInformationPanel
+}
+
+export default meta
+type Story = StoryObj<typeof ProfileInformationPanel>
+
+const firstStoryElements = [
+  {
+    subtitle: "Dietary requirements",
+    description: "Allergic to nuts"
+  },
+  {
+    subtitle: "Skiier/Snowboarder",
+    description: "Both"
+  }
+]
+
+export const littleElementsWithEdit: Story = {
+  decorators: [
+    () => {
+      return (
+        <>
+          <ProfileInformationPanel
+            title="Additional details"
+            onEdit={() => {
+              alert("button clicked")
+            }}
+          >
+            {firstStoryElements.map((x) => (
+              <>
+                <div>
+                  <p className="text-base font-normal leading-tight text-stone-300">
+                    {x.subtitle}
+                  </p>
+                  <p className="text-black/opacity-20 text-base font-normal leading-tight">
+                    {x.description}
+                  </p>
+                </div>
+              </>
+            ))}
+          </ProfileInformationPanel>
+        </>
+      )
+    }
+  ]
+}
+
+const secondStoryElements = [
+  {
+    subtitle: "Name",
+    description: "John Doe"
+  },
+  {
+    subtitle: "Gender",
+    description: "Male"
+  },
+  {
+    subtitle: "Student ID",
+    description: "910867209"
+  },
+  {
+    subtitle: "Date of birth",
+    description: "23/06/2003"
+  },
+  {
+    subtitle: "Email",
+    description: "[email protected]"
+  },
+  {
+    subtitle: "Phone number",
+    description: "021 123 1234"
+  },
+  {
+    subtitle: "Emergency contact info",
+    description: "Jason, Father, 021 432, 4321"
+  }
+]
+const thirdStoryElements = [
+  {
+    subtitle: "Membership type",
+    description: "UoA Student"
+  },
+  {
+    subtitle: "Valid till",
+    description: "9/12/24"
+  }
+]
+export const ManyElementsWithEdit: Story = {
+  args: {
+    title: "Personal Details",
+    onEdit: () => {
+      alert("lol")
+    },
+    children: [
+      <>
+        {secondStoryElements.map((x) => (
+          <>
+            <div>
+              <p className="text-base font-normal leading-tight text-stone-300">
+                {x.subtitle}
+              </p>
+              <p className="text-black/opacity-20 text-base font-normal leading-tight">
+                {x.description}
+              </p>
+            </div>
+          </>
+        ))}
+      </>
+    ]
+  }
+}
+
+export const elementsWithoutEdit = {
+  args: {
+    title: "Membership",
+    children: [
+      <>
+        {thirdStoryElements.map((x) => (
+          <>
+            <div>
+              <p className="text-base font-normal leading-tight text-stone-300">
+                {x.subtitle}
+              </p>
+              <p className="text-black/opacity-20 text-base font-normal leading-tight">
+                {x.description}
+              </p>
+            </div>
+          </>
+        ))}
+      </>
+    ]
+  }
+}

client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.tsx

@@ -0,0 +1,39 @@
+import { ReactNode } from "react"
+import editButton from "assets/icons/edit.svg"
+interface IProfileInformationPanel {
+  title: string // The title field
+  children?: ReactNode
+  onEdit?: () => void // The edit button
+}
+
+const ProfileInformationPanel = ({
+  title,
+  children,
+  onEdit
+}: IProfileInformationPanel) => {
+  return (
+    // <div className="box-border flex w-[75%] flex-col border p-4">
+    // <div className="absolute max-w-[50%] flex-row rounded border border-stone-300 bg-white p-4">
+    <div className="absolute max-w-[90%] flex-row rounded border border-stone-300 bg-white p-4">
+      <div className="flex flex-nowrap justify-between text-nowrap p-1">
+        <h3 className="text-dark-blue-100">{title}</h3>
+        {onEdit && (
+          <img
+            className="flex-end max-w-[80%] cursor-pointer items-end pl-4 pr-4"
+            src={editButton}
+            alt="Edit"
+            onClick={onEdit}
+          />
+        )}
+      </div>
+      {/* <div className="flex w-[90%] flex-row flex-wrap gap-5 p-1 pt-3"> */}
+      <div className="flex flex-row flex-wrap items-stretch justify-start gap-10 p-1 pt-3">
+        {children}
+      </div>
+      {/* </div> */}
+      {/* <div className="flex-direction: row; flex">{children}</div> */}
+    </div>
+  )
+}
+
+export default ProfileInformationPanel