Develop

apps/link/app/_components/Button.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { FC } from "react";
+import Link from "next/link";
+import { Button as MUIButton } from "@mui/material";
+
+interface ButtonProps {
+  text: string;
+  color: string;
+  href: string;
+}
+
+export const Button: FC<ButtonProps> = ({ text, color, href }) => (
+  <Link href={href} passHref>
+    <MUIButton
+      variant="contained"
+      disableElevation
+      sx={{
+        fontFamily: "Poppins, sans-serif",
+        fontWeight: 700,
+        borderRadius: 2,
+        backgroundColor: color,
+        padding: "6px 30px",
+        margin: "20px 0px",
+        whiteSpace: "nowrap",
+        textTransform: "none",
+      }}
+    >
+      {text}
+    </MUIButton>
+  </Link>
+);

apps/link/app/_components/DisplayError.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { FC } from "react";
+import { Box, Grid } from "@mui/material";
+
+type DisplayErrorProps = {
+  error: Error;
+};
+
+export const DisplayError: FC<DisplayErrorProps> = ({ error }) => (
+  <Grid
+    container
+    direction="column"
+    justifyContent="space-around"
+    alignItems="center"
+    style={{ height: 600, width: "100%", color: "red", fontSize: 20 }}
+  >
+    <Grid item>
+      <Box>{`Error: ${error.message}`}</Box>
+    </Grid>
+  </Grid>
+);

apps/link/app/_components/MultiProvider.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { FC, PropsWithChildren, useState } from "react";
+import { CssBaseline } from "@mui/material";
+import { CookiesProvider } from "react-cookie";
+import { SessionProvider } from "next-auth/react";
+import { NextAppDirEmotionCacheProvider } from "tss-react/next/appDir";
+import { SWRConfig } from "swr";
+import { GraphQLClient } from "graphql-request";
+import { AdapterDateFns } from "@mui/x-date-pickers-pro/AdapterDateFns";
+import { LocalizationProvider } from "@mui/x-date-pickers-pro";
+import { LicenseInfo } from "@mui/x-date-pickers-pro";
+
+LicenseInfo.setLicenseKey(
+  "7c9bf25d9e240f76e77cbf7d2ba58a23Tz02NjU4OCxFPTE3MTU4NjIzMzQ2ODgsUz1wcm8sTE09c3Vic2NyaXB0aW9uLEtWPTI="
+);
+
+export const MultiProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [csrfToken, setCsrfToken] = useState("");
+  const origin =
+    typeof window !== "undefined" && window.location.origin
+      ? window.location.origin
+      : null;
+  const client = new GraphQLClient(`${origin}/proxy/zammad/graphql`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  });
+  const graphQLFetcher = async ({ document, variables }: any) => {
+    const requestHeaders = {
+      "X-CSRF-Token": csrfToken,
+    };
+    const { data, headers } = await client.rawRequest(
+      document,
+      variables,
+      requestHeaders
+    );
+
+    const token = headers.get("CSRF-Token");
+    setCsrfToken(token);
+
+    return data;
+  };
+
+  return (
+    <>
+      <CssBaseline />
+      <NextAppDirEmotionCacheProvider options={{ key: "css" }}>
+        <SWRConfig value={{ fetcher: graphQLFetcher }}>
+          <SessionProvider>
+            <CookiesProvider>
+              <LocalizationProvider dateAdapter={AdapterDateFns}>
+                {children}
+              </LocalizationProvider>
+            </CookiesProvider>
+          </SessionProvider>
+        </SWRConfig>
+      </NextAppDirEmotionCacheProvider>
+    </>
+  );
+};