refactor(dev): Move components & add StatusBadge component

Author: CrawlerCode

…s/dev/src/app/components/ExampleList.tsx …rc/app/(app)/_components/ExampleList.tsxpackages/dev/src/app/components/ExampleList.tsx renamed to packages/dev/src/app/(app)/_components/ExampleList.tsx packages/dev/src/app/components/ExampleList.tsx renamed to packages/dev/src/app/(app)/_components/ExampleList.tsx

@@ -1,5 +1,5 @@
+import Badge from "@/components/general/Badge";
 import type { ComponentProps } from "react";
-import Badge from "../general/Badge";
 
 export const ExpiresBadge = ({
   expiresAt: expiresAtString,

…src/app/components/auth/ExpiresBadge.tsx …/(app)/_components/auth/ExpiresBadge.tsxpackages/dev/src/app/components/auth/ExpiresBadge.tsx renamed to packages/dev/src/app/(app)/_components/auth/ExpiresBadge.tsx packages/dev/src/app/components/auth/ExpiresBadge.tsx renamed to packages/dev/src/app/(app)/_components/auth/ExpiresBadge.tsx

@@ -0,0 +1,18 @@
+import Badge from "@/components/general/Badge";
+import type { ComponentProps } from "react";
+
+export const StatusBadge = ({
+  status,
+  ...props
+}: {
+  status: "authenticated" | "unauthenticated" | "loading";
+} & Omit<ComponentProps<typeof Badge>, "variant" | "children">) => {
+  return (
+    <Badge
+      variant={status === "authenticated" ? "green" : status === "loading" ? "yellow" : "red"}
+      {...props}
+    >
+      Status: {status}
+    </Badge>
+  );
+};

…p/components/auth/SignInOrOutButtons.tsx …/_components/auth/SignInOrOutButtons.tsxpackages/dev/src/app/components/auth/SignInOrOutButtons.tsx renamed to packages/dev/src/app/(app)/_components/auth/SignInOrOutButtons.tsx packages/dev/src/app/components/auth/SignInOrOutButtons.tsx renamed to packages/dev/src/app/(app)/_components/auth/SignInOrOutButtons.tsx

@@ -1,22 +1,17 @@
 "use client";
 
 import { useSession } from "next-auth/react";
-import Badge from "../../general/Badge";
+import { ExpiresBadge } from "../ExpiresBadge";
+import { StatusBadge } from "../StatusBadge";
 
 export const AuthjsSessionClient = () => {
   const { status, data: session } = useSession();
 
   return (
     <>
       <div className="mb-2 flex gap-1">
-        <Badge
-          variant={status === "authenticated" ? "green" : status === "loading" ? "yellow" : "red"}
-        >
-          Status: {status}
-        </Badge>
-        {session?.expires && (
-          <Badge variant="yellow">Expires: {new Date(session.expires).toLocaleString()}</Badge>
-        )}
+        <StatusBadge status={status} />
+        <ExpiresBadge title="Session Expires" expiresAt={session?.expires} />
       </div>
       <pre className="overflow-auto rounded-lg bg-gray-100 p-4">
         {JSON.stringify(session?.user ?? null, null, 2)}

packages/dev/src/app/(app)/_components/auth/StatusBadge.tsx

@@ -1,18 +1,15 @@
 import { auth } from "@/auth";
-import Badge from "../../general/Badge";
+import { ExpiresBadge } from "../ExpiresBadge";
+import { StatusBadge } from "../StatusBadge";
 
 export const AuthjsSessionServer = async () => {
   const session = await auth();
 
   return (
     <>
       <div className="mb-2 flex gap-1">
-        <Badge variant={session ? "green" : "red"}>
-          Status: {session ? "authenticated" : "unauthenticated"}
-        </Badge>
-        {session?.expires && (
-          <Badge variant="yellow">Expires: {new Date(session.expires).toLocaleString()}</Badge>
-        )}
+        <StatusBadge status={session ? "authenticated" : "unauthenticated"} />
+        <ExpiresBadge title="Session Expires" expiresAt={session?.expires} />
       </div>
       <pre className="overflow-auto rounded-lg bg-gray-100 p-4">
         {JSON.stringify(session?.user ?? null, null, 2)}

…ents/auth/authjs/AuthjsSessionClient.tsx …ents/auth/authjs/AuthjsSessionClient.tsxpackages/dev/src/app/components/auth/authjs/AuthjsSessionClient.tsx renamed to packages/dev/src/app/(app)/_components/auth/authjs/AuthjsSessionClient.tsx packages/dev/src/app/components/auth/authjs/AuthjsSessionClient.tsx renamed to packages/dev/src/app/(app)/_components/auth/authjs/AuthjsSessionClient.tsx

@@ -1,20 +1,17 @@
 "use client";
 
+import Badge from "@/components/general/Badge";
 import { usePayloadSession } from "payload-authjs/client";
-import Badge from "../../general/Badge";
 import { ExpiresBadge } from "../ExpiresBadge";
+import { StatusBadge } from "../StatusBadge";
 
-export const PayloadSessionClientWithUsePayloadSession = () => {
+export const PayloadSessionClient = () => {
   const { status, session, refresh } = usePayloadSession();
 
   return (
     <>
       <div className="mb-2 flex gap-1">
-        <Badge
-          variant={status === "authenticated" ? "green" : status === "loading" ? "yellow" : "red"}
-        >
-          Status: {status}
-        </Badge>
+        <StatusBadge status={status} />
         <ExpiresBadge title="Session Expires" expiresAt={session?.expires} onClick={refresh} />
         <ExpiresBadge title="Account Expires" expiresAt={session?.user.currentAccount?.expiresAt} />
         <ExpiresBadge