Mobile friendly version of ticket view

Refactor the header into own component, so it can be shown at "page top" for the mobile one column view.

apps/link/app/(main)/tickets/[id]/_components/TicketHeader.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { FC, useState, useEffect } from "react";
+import { Box, Typography } from "@mui/material";
+import { fonts } from "@link-stack/ui";
+import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
+import {
+  ConversationHeader,
+  ConversationHeaderProps,
+} from "@chatscope/chat-ui-kit-react";
+import { getTicketAction } from "@/app/_actions/tickets";
+
+interface TicketHeaderProps {
+  id?: string;
+  ticket?: any;
+}
+
+export const TicketHeader: FC<ConversationHeaderProps & TicketHeaderProps> = (
+  props,
+) => {
+  const { poppins, roboto } = fonts;
+
+  const [ticket, setTicket] = useState<any>(props.ticket || null);
+
+  useEffect(() => {
+    if (!ticket) {
+      const fetchTicket = async () => {
+        const result = await getTicketAction(props.id);
+        setTicket(result);
+      };
+
+      fetchTicket();
+
+      const interval = setInterval(fetchTicket, 20000);
+      return () => clearInterval(interval);
+    }
+  }, [props.id]);
+
+  return (
+    <>
+      <Box
+        sx={{
+          width: "100%",
+          textAlign: "center",
+          fontWeight: "bold",
+        }}
+      >
+        <Typography
+          variant="h5"
+          sx={{
+            fontFamily: poppins.style.fontFamily,
+            fontWeight: 700,
+          }}
+        >
+          {ticket?.title}
+        </Typography>
+        <Typography
+          variant="h6"
+          sx={{
+            fontFamily: roboto.style.fontFamily,
+            fontWeight: 400,
+          }}
+        >
+          {ticket
+            ? `Ticket #${ticket.number} (created ${new Date(
+                ticket.createdAt,
+              ).toLocaleDateString()})`
+            : ""}
+        </Typography>
+      </Box>
+    </>
+  );
+};