✨ New Components - User Group Sidebar Components

components/blocks-renderer.tsx

@@ -16,6 +16,9 @@ import { LocationBlock } from "./training/locationBlock";
 import { PresenterBlock } from "./training/presenterBlock";
 import { TrainingInformation } from "./training/trainingInformation";
 import { TrainingLearningOutcome } from "./training/trainingLearningOutcome";
+import { JoinAsPresenter } from "./usergroup/joinAsPresenter";
+import { JoinGithub } from "./usergroup/joinGithub";
+import { Organizer } from "./usergroup/organizer";
 
 const Carousel = dynamic(
   () => import("./blocks/carousel").then((mod) => mod.Carousel),
@@ -41,7 +44,10 @@ const componentMap = {
   TrainingLearningOutcome,
   PresenterBlock,
   LocationBlock,
-  Agenda: Agenda,
+  Agenda,
+  Organizer,
+  JoinGithub,
+  JoinAsPresenter,
 };
 
 export const Blocks = ({ prefix, blocks }) => {

components/blocks/index.ts

@@ -10,6 +10,9 @@ import { locationBlockSchema } from "../training/locationBlock";
 import { presenterBlockSchema } from "../training/presenterBlock";
 import { trainingInformationSchema } from "../training/trainingInformation";
 import { trainingLearningOutcomeSchema } from "../training/trainingLearningOutcome";
+import { joinAsPresenterSchema } from "../usergroup/joinAsPresenter";
+import { joinGithubSchema } from "../usergroup/joinGithub";
+import { organizerSchema } from "../usergroup/organizer";
 import { aboutUsBlockSchema } from "./aboutUs";
 import { agendaSchema } from "./agenda";
 import { builtOnAzureBlockSchema } from "./builtOnAzure";
@@ -70,6 +73,9 @@ export const pageBlocks: Template[] = [
   presenterBlockSchema,
   locationBlockSchema,
   agendaSchema,
+  organizerSchema,
+  joinGithubSchema,
+  joinAsPresenterSchema,
 ];
 
 export * from "../bookingButton/bookingButton";
@@ -81,6 +87,9 @@ export * from "../training/eventBooking";
 export * from "../training/presenterBlock";
 export * from "../training/trainingInformation";
 export * from "../training/trainingLearningOutcome";
+export * from "../usergroup/joinAsPresenter";
+export * from "../usergroup/joinGithub";
+export * from "../usergroup/organizer";
 export * from "./aboutUs";
 export * from "./builtOnAzure";
 export * from "./carousel";

components/usergroup/joinAsPresenter.tsx

@@ -0,0 +1,74 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Template } from "tinacms";
+import { tinaField } from "tinacms/dist/react";
+
+const Avatar = ({ img }) => {
+  return (
+    <div className="relative h-62 w-56">
+      <svg
+        viewBox="0 0 224 248"
+        xmlns="http://www.w3.org/2000/svg"
+        width="100%"
+        height="100%"
+      >
+        <path fill="#E9E9E9" d="M224,248 v-106 A112,106 0 1,0 112,248 Z" />
+        <defs>
+          <clipPath id="shape">
+            <path d="M224,248 V0 H0 V142 A112,106 0 0,0 112,248 Z" />
+          </clipPath>
+        </defs>
+      </svg>
+
+      {img && (
+        <Image
+          alt="Picture of Presenter"
+          src={img}
+          className="object-contain"
+          fill={true}
+          style={{
+            clipPath: "url(#shape)",
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export const JoinAsPresenter = ({ data }) => {
+  return (
+    <div className="flex flex-row items-center gap-3 font-helvetica">
+      <div data-tina-field={tinaField(data, "img")}>
+        <Avatar img={data?.img} />
+      </div>
+      <div className="text-center">
+        <div className="text-xl leading-7">Join us as a Presenter</div>
+        <Link
+          href={data?.link ?? "/"}
+          target="_blank"
+          data-tina-field={tinaField(data, "link")}
+          className="unstyled mx-auto mt-6 block h-10 w-max rounded-md bg-sswRed px-4 py-2 text-md leading-6 text-white"
+        >
+          Learn more
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export const joinAsPresenterSchema: Template = {
+  label: "Join As Presenter",
+  name: "joinAsPresenter",
+  fields: [
+    {
+      label: "Learn More Link",
+      name: "link",
+      type: "string",
+    },
+    {
+      label: "Image",
+      name: "img",
+      type: "image",
+    },
+  ],
+};

components/usergroup/joinGithub.tsx

@@ -0,0 +1,49 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Template } from "tinacms";
+import { tinaField } from "tinacms/dist/react";
+
+export const JoinGithub = ({ data }) => {
+  return (
+    <div className="flex flex-col items-center justify-center gap-y-3 rounded-xl bg-gray-900 bg-arcBackground bg-bottom bg-no-repeat px-11 py-5 text-center font-helvetica">
+      <Image
+        src={"/images/badges/Github-Badge.svg"}
+        alt="github image"
+        width={80}
+        height={80}
+        className="mx-auto"
+      />
+      <div
+        className="text-center text-md text-white"
+        data-tina-field={tinaField(data, "title")}
+      >
+        {data?.title}
+      </div>
+      <Link
+        href={data?.link ?? "/"}
+        target="_blank"
+        data-tina-field={tinaField(data, "link")}
+        className="unstyled h-12 w-max rounded-md bg-sswRed px-4 py-2 text-md text-white"
+      >
+        Join the crowd
+      </Link>
+    </div>
+  );
+};
+
+export const joinGithubSchema: Template = {
+  label: "Join Github",
+  name: "joinGithub",
+  fields: [
+    {
+      label: "Title",
+      name: "title",
+      type: "string",
+    },
+    {
+      label: "Join Github Link",
+      name: "link",
+      type: "string",
+    },
+  ],
+};

components/usergroup/organizer.tsx

@@ -0,0 +1,78 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Template } from "tinacms";
+import { tinaField } from "tinacms/dist/react";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+
+export const Organizer = ({ data }) => {
+  return (
+    <div className="flex flex-col gap-5 font-helvetica">
+      <span className="text-4xl text-sswRed">Organizer</span>
+      <div className="flex flex-row items-center gap-2">
+        <div
+          className="h-17 w-17 overflow-hidden rounded-full"
+          data-tina-field={tinaField(data, "name")}
+        >
+          <Image
+            alt={`Picture of ${data?.name ?? "Organizer"}`}
+            src={data?.profileImg ?? ""}
+            height={68}
+            width={68}
+          />
+        </div>
+        <div className="font-sans">
+          <Link
+            data-tina-field={tinaField(data, "profileLink")}
+            className="cursor-pointer text-2xl underline"
+            href={data?.profileLink ?? "/"}
+          >
+            <span data-tina-field={tinaField(data, "name")}>
+              {data?.name ?? ""}
+            </span>
+          </Link>
+          <div
+            data-tina-field={tinaField(data, "position")}
+            className="text-sm text-gray-500"
+          >
+            {data?.position ?? ""}
+          </div>
+        </div>
+      </div>
+      <div data-tina-field={tinaField(data, "content")}>
+        <TinaMarkdown content={data?.content} />
+      </div>
+    </div>
+  );
+};
+
+export const organizerSchema: Template = {
+  label: "Organizer",
+  name: "organizer",
+  fields: [
+    {
+      type: "image",
+      label: "Profile Image",
+      name: "profileImg",
+    },
+    {
+      type: "string",
+      label: "Profile Link",
+      name: "profileLink",
+    },
+    {
+      type: "string",
+      label: "Name",
+      name: "name",
+    },
+    {
+      type: "string",
+      label: "Position",
+      name: "position",
+    },
+    {
+      type: "rich-text",
+      label: "Content",
+      name: "content",
+    },
+  ],
+};

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

tailwind.config.js

@@ -414,6 +414,7 @@ module.exports = {
         "video-mask": "url('/images/video-mask.png')",
         polygons: "url('/images/background/polygonBackground.png')",
         subscribeBackground: "url('/images/thumbs/subscribeBackground.png')",
+        arcBackground: "url('/images/background/arcBackground.png')",
       },
     },
     linearGradientColors: {