chore: move files

src/app/(dashboard)/guild/[guildId]/page.tsx

@@ -1,12 +1,13 @@
+import DebugDisplay from '@components/util/DebugDisplay';
 import { guild } from '@lib/utils/db';
 import { getGuildInfo, isGuildManageable } from '@lib/utils/discord';
 import { getServerSession } from '@lib/utils/serverSession';
 import type { Guild } from '@prisma/client';
 import type { APIGuild } from 'discord-api-types/v10';
 import type { Metadata, ResolvingMetadata } from 'next';
-import ConfigScreen from './configScreen';
-import NotYetInvitedComponent from './notInvited';
-import TestComponent from './tryout';
+import ConfigScreen from '../../../../components/pages/guildDetail/configScreen';
+import NotYetInvitedComponent from '../../../../components/pages/guildDetail/notInvited';
+import TestComponent from '../../../../components/pages/guildDetail/tryout';
 
 interface GuildDetailPageProps {
 	params: {
@@ -79,10 +80,10 @@ export default async function GuildDetailPage({ params }: GuildDetailPageProps)
 			<ConfigScreen guildId={guildId} discordData={discordData} databaseData={databaseData} />
 			<br />
 			<br />
-			Database: {JSON.stringify(databaseData)}
+			<DebugDisplay label="Database" data={JSON.stringify(databaseData)} />
 			<br />
 			<br />
-			Discord: {JSON.stringify(discordData)}
+			<DebugDisplay label="Discord" data={JSON.stringify(discordData)} />
 			<br />
 			<br />
 			Session Guilds: {JSON.stringify(session?.guilds)}

src/app/(dashboard)/guilds/page.tsx

@@ -2,7 +2,7 @@ import { getUserGuilds } from '@lib/utils/oauth';
 import { getServerSession } from '@lib/utils/serverSession';
 import { BitField, enumToObject } from '@sapphire/bitfield';
 import { PermissionFlagsBits } from 'discord-api-types/v10';
-import GuildsDisplay from './GuildsDisplay';
+import GuildsDisplay from '../../../components/pages/guilds/GuildsDisplay';
 
 export default async function GuildsPage() {
 	const session = await getServerSession();

src/app/tryout/page.tsx

@@ -8,9 +8,7 @@ export default function TryoutPage(): JSX.Element {
 	const { data: session } = useSession();
 	return (
 		<>
-			<h1>Try out</h1>
-			<h3>Name: Name</h3>
-			{/* <h3>Name: {session?.user.username}</h3> */}
+			<h3>Name: {session?.user.username}</h3>
 			{/* <ProfilePicture session={session} /> */}
 			<ProfilePicture />
 			<h2>{BIRTHDAYY_LOGO}</h2>

src/app/(dashboard)/guilds/guildCard.tsx → src/components/pages/guilds/guildCard.tsx

@@ -6,10 +6,10 @@ import Link from 'next/link';
 function GuildDetailCard({ guild }: GuildDetailCardProps) {
 	return (
 		<div className="GuildDetailCard" key={guild.id}>
-			<div className="grid-item mx-auto">
+			<div className="mx-auto grid-item">
 				<Link href={`/guild/${guild.id}`}>
 					<div className="card card-compact">
-						<div className="bg-base-100 text-center">
+						<div className="text-center bg-base-100">
 							<Image
 								src={`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`}
 								alt={`${guild.name} Server Icon`}
@@ -20,8 +20,8 @@ function GuildDetailCard({ guild }: GuildDetailCardProps) {
 						</div>
 
 						<div className="card-body">
-							<div className="card-title text-center">
-								<p className="  ">{guild.name}</p>
+							<div className="text-center card-title">
+								<p className="">{guild.name}</p>
 							</div>
 						</div>
 					</div>

src/components/util/DebugDisplay.tsx

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+
+interface DebugDisplayProps {
+	label: string;
+	data: string;
+	children?: ReactNode;
+}
+
+const DebugDisplay: React.FC<DebugDisplayProps> = ({ label, data, children }: DebugDisplayProps) => {
+	return (
+		<>
+			<details tabIndex={0} className="border collapse collapse-arrow border-base-300 bg-base-200">
+				<summary className="text-xl font-medium collapse-title">DEBUG: {label}</summary>
+				<div className="collapse-content">
+					<p>{data}</p>
+					{children}
+				</div>
+			</details>
+		</>
+	);
+};
+
+export default DebugDisplay;