mhsf-dev/src/components/AfterServerView.tsx

"use client";
import { getCustomization } from "@/lib/api";
import { useEffect, useState } from "react";
import { Card, CardDescription, CardHeader, CardTitle } from "./ui/card";
import Markdown from "react-markdown";
import { useTheme } from "next-themes";

export default function AfterServerView({ server }: { server: string }) {
  const [description, setDescription] = useState("");
  const [discord, setDiscord] = useState("");
  const { resolvedTheme } = useTheme();

  useEffect(() => {
    getCustomization(server).then((b) => {
      if (b != null) {
        setDescription(b.description == null ? "" : b.description);
        setDiscord(b.discord == null ? "" : b.discord);
      }
    });
  }, []);

  return (
    <div className="grid sm:grid-cols-4 pl-4 pr-4 gap-3.5">
      <Card className="sm:col-span-3">
        <CardDescription className="p-4 prose dark:prose-invert">
          <Markdown disallowedElements={["img"]}>{description}</Markdown>
        </CardDescription>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Discord Server</CardTitle>
          <CardDescription className="p-4 prose dark:prose-invert">
            <iframe
              src={`https://discord.com/widget?id=${discord}&theme=${resolvedTheme}`}
              height="500"
              allowTransparency={true}
              className="rounded-lg lg:w-[350px]"
              sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
            />
          </CardDescription>
        </CardHeader>
      </Card>
      <br />
    </div>
  );
}