327 Generic information panel

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

@@ -0,0 +1,115 @@
+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>
+
+interface TestElements {
+  subtitle: string
+  description: string
+}
+
+const ChildMapper = (children: Array<TestElements>) => {
+  return children.map((child) => (
+    <>
+      <div>
+        <p className="pb-1 text-base font-normal leading-tight text-stone-300">
+          {child.subtitle}
+        </p>
+        <p className="text-black/opacity-20 pb-1 text-base font-normal leading-tight">
+          {child.description}
+        </p>
+      </div>
+    </>
+  ))
+}
+
+const firstStoryElements: Array<TestElements> = [
+  {
+    subtitle: "Dietary requirements",
+    description: "Allergic to nuts"
+  },
+  {
+    subtitle: "Skiier/Snowboarder",
+    description: "Both"
+  }
+]
+
+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 littleElementsWithEdit = () => {
+  return (
+    <>
+      <ProfileInformationPanel
+        title="Additional details"
+        onEdit={() => {
+          alert("Additional details button clicked")
+        }}
+      >
+        {ChildMapper(firstStoryElements)}
+      </ProfileInformationPanel>
+    </>
+  )
+}
+
+export const ManyElementsWithEdit: Story = {
+  args: {
+    title: "Personal Details",
+    onEdit: () => {
+      alert("Personal details edit button")
+    },
+    children: ChildMapper(secondStoryElements)
+  }
+}
+
+export const elementsWithoutEdit = () => {
+  return (
+    <ProfileInformationPanel title="Membership">
+      {ChildMapper(thirdStoryElements)}
+    </ProfileInformationPanel>
+  )
+}

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

@@ -0,0 +1,35 @@
+import { ReactNode } from "react"
+import EditIcon from "assets/icons/edit.svg?react"
+interface IProfileInformationPanel {
+  title: string // The title field
+  children?: ReactNode
+  onEdit?: () => void // The edit button
+}
+
+const ProfileInformationPanel = ({
+  title,
+  children,
+  onEdit
+}: IProfileInformationPanel) => {
+  return (
+    <div className="absolute w-[90%] flex-row rounded border border-stone-300 bg-white p-5">
+      <div className="flex flex-nowrap justify-between p-1">
+        <h3 className="text-dark-blue-100 text-nowrap">{title}</h3>
+        {onEdit && (
+          <div
+            className="inline-flex h-[30px] w-[30px] cursor-pointer items-center justify-center py-[5px] pl-[5px]"
+            onClick={onEdit}
+          >
+            <EditIcon className="absolute h-5 w-[21.69px]" />
+          </div>
+        )}
+      </div>
+
+      <div className="flex flex-row flex-wrap items-stretch justify-start gap-x-[50px] gap-y-[10px] p-1 pt-3">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default ProfileInformationPanel