618 events card (#627)

* set up files

* set up story

* ran yarn

* interface 4 props

* structure of display

* destructure

* prettier

* test

* title style

* margin for all, date

* location

* divider made

* styled

* spacing

* top margin for location

* removed divs

* divider style

* example text

* title

* responsive width

* text centered for phones

* button added

* button + onClick handler

* fixed according to BENSON's comment

* optional prop set

* styling padding

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

@@ -0,0 +1,19 @@
+/* eslint-disable no-irregular-whitespace */
+import type { Meta, StoryObj } from "@storybook/react"
+
+import EventsCard from "./EventsCard"
+const meta: Meta<typeof EventsCard> = {
+  component: EventsCard
+}
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const DefaultEventsCard: Story = {
+  tags: ["autodocs"],
+  args: {
+    title: "Outdoor Clubs Welcome Party",
+    date: "THU 18/7 • 6pm",
+    location: "Shadows Bar - 8 Alfred St, CBD, Auckland",
+    content: `Get ready to kick off Re-O-Week with a bang!  Join us at Shadows Bar for the ultimate Outdoor Clubs Welcome Party, hosted by UoA Snowsports Club! Whether you're into hiking, biking, skiing, or just having a good time, this is the place to be!`
+  }
+}

client/src/components/generic/EventsCard/EventsCard.tsx

@@ -0,0 +1,35 @@
+import Button from "../FigmaButtons/FigmaButton"
+
+interface EventsCardProps {
+  date?: string
+  title: string
+  location?: string
+  content: React.ReactNode
+  onClick: () => void
+}
+
+type props = EventsCardProps
+
+const EventsCard = ({ date, title, location, content, onClick }: props) => {
+  const Divider = () => {
+    return <div className="bg-gray-3 mb-4 mt-4 h-[1px] w-full"></div>
+  }
+  return (
+    <div className="h-full w-full border p-8 text-center md:text-left">
+      <h5 className="font-bold">{date}</h5>
+
+      <h3 className="text-dark-blue-100 mt-1 font-bold">{title}</h3>
+
+      <div className="text-gray-4 mt-2">{location}</div>
+      <Divider />
+
+      <div className="text-left">{content}</div>
+
+      <div className="mt-4">
+        <Button onClick={onClick}>Sign Up!</Button>
+      </div>
+    </div>
+  )
+}
+
+export default EventsCard