forked from administration/panel
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { UserReviewCard } from "@/components/pages/stream/UserReviewCard";
|
|
import { Card, CardDescription } from "@/components/ui/card";
|
|
import { Account, fetchAccountById, fetchUserById } from "@/lib/db";
|
|
import { Circle } from "lucide-react";
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { User } from "revolt-api";
|
|
|
|
export default function UserStream() {
|
|
const [connectionState, setConnectionState] = useState<"Connecting"|"Connected"|"Disconnected">("Connecting");
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [account, setAccount] = useState<Account | null>(null);
|
|
|
|
const connectionColour = useMemo(() => {
|
|
switch(connectionState) {
|
|
case "Connected": return "#55aa7f";
|
|
case "Connecting": return "#fb923c";
|
|
case "Disconnected": return "#ef4444";
|
|
}
|
|
}, [connectionState]);
|
|
|
|
useEffect(() => {
|
|
fetchUserById("01H6BZB5F4B6GTKSJCV6TRGZ22").then(setUser);
|
|
fetchAccountById("01H6BZB5F4B6GTKSJCV6TRGZ22").then(setAccount);
|
|
|
|
setTimeout(() => setConnectionState("Connected"), 1000);
|
|
}, []);
|
|
|
|
return account ? (
|
|
<div className="flex flex-col gap-2">
|
|
<Card className="flex flex-row justify-end pr-2 h-[40px]">
|
|
<CardDescription className="flex flex-row gap-2 items-center">
|
|
<span className="flex flex-row items-center gap-1">
|
|
{connectionState}
|
|
<Circle color={connectionColour} fill={connectionColour} />
|
|
</span>
|
|
</CardDescription>
|
|
</Card>
|
|
<div className="flex flex-col gap-2">
|
|
<UserReviewCard user={user ?? undefined} account={account} />
|
|
<UserReviewCard user={undefined} account={account} />
|
|
</div>
|
|
</div>
|
|
) : null;
|
|
}
|