"use client";
import { useOrganization, useSession, useUser } from "@clerk/nextjs";
import classNames from "classnames";
import { useEffect, useState } from "react";
import { CopyIcon, Dot } from "../icons";
import Image from "next/image";
import "./prism.css";
declare global {
interface Window {
Prism: any;
}
}
export function UserDetails() {
const { isLoaded, user } = useUser();
const [jsonOutput, setJsonOutput] = useState(false);
return (
User
setJsonOutput(!jsonOutput)}
disabled={!isLoaded}
/>
{isLoaded && user ? (
jsonOutput ? (
) : (
- User ID
-
{user.id}
{user.firstName && (
- First Name
-
{user.firstName}
)}
{user.lastName && (
- Last Name
-
{user.lastName}
)}
- Email addresses
-
{user.emailAddresses.map((email) => (
{email.emailAddress}
{user.primaryEmailAddressId === email.id && (
Primary
)}
))}
{user.imageUrl && (
- Profile Image
-
)}
)
) : (
Loading user data...
)}
);
}
export function SessionDetails() {
const { isLoaded, session } = useSession();
const [jsonOutput, setJsonOutput] = useState(false);
return (
Session
setJsonOutput(!jsonOutput)}
disabled={!isLoaded}
/>
{isLoaded && session ? (
jsonOutput ? (
) : (
- Session ID
-
{session.id}
- Status
-
{session.status === `active` && (
Active
)}
- Last Active
-
{session.lastActiveAt.toLocaleString()}
- Expiry
-
{session.expireAt.toLocaleString()}
)
) : (
Loading user data...
)}
);
}
export function OrgDetails() {
const { isLoaded, organization } = useOrganization();
const [jsonOutput, setJsonOutput] = useState(false);
return (
Organization
setJsonOutput(!jsonOutput)}
disabled={!(isLoaded && organization)}
/>
{isLoaded ? (
organization ? (
jsonOutput ? (
) : (
- Organization ID
-
{organization.id}
- Name
-
{organization.name}
- Members
-
{organization.membersCount}
-
Pending invitations
-
{organization.pendingInvitationsCount}
- Image
-
)
) : (
You are currently logged in to your personal workspace.
Create or switch to an organization to see its details.
)
) : (
Loading organization data...
)}
);
}
function Toggle(props: {
checked: boolean;
onChange: () => void;
disabled: boolean;
}) {
return (
);
}
function CopyButton(props: { text: string }) {
const [tooltipShown, setTooltipShown] = useState(false);
useEffect(() => {
if (tooltipShown) {
const timeout = setTimeout(() => setTooltipShown(false), 2000);
return () => clearTimeout(timeout);
}
}, [tooltipShown]);
return (
<>
Copied!
);
}
function JSONOutput(props: { json: any }) {
useEffect(() => {
if (window.Prism) {
console.log(`highlighting`);
window.Prism.highlightAll();
}
}, []);
return (
{JSON.stringify(props.json, null, 2)}
);
}