8-bit Friend List

1import { cn } from "@/lib/utils";
2import {
3  Card,
4  CardContent,
5  CardHeader,
6  CardTitle,
7} from "@/components/ui/8bit/card";
8import {
9  Avatar,
10  AvatarFallback,
11  AvatarImage,
12} from "@/components/ui/8bit/avatar";
13import { cva } from "class-variance-authority";
14import { ScrollArea } from "@/components/ui/8bit/scroll-area";
15 
16const truncate = (
17  str: string | null | undefined,
18  length: number
19): string | null => {
20  if (!str || str.length <= length) return str ?? null;
21  return `${str.slice(0, length - 3)}...`;
22};
23 
24const statusVariants = cva("w-2 h-2 flex-shrink-0", {
25  variants: {
26    status: {
27      ingame: "bg-destructive border-destructive",
28      online: "bg-primary border-primary",
29      away: "bg-accent border-accent",
30      offline: "bg-muted border-muted",
31      default: "bg-muted border-muted",
32    },
33  },
34  defaultVariants: {
35    status: "default",
36  },
37});
38 
39const playerCardVariants = cva(
40  "flex items-center justify-between sm:p-3  p-2 rounded-lg transition-all duration-200 min-w-[150px] overflow-hidden",
41  {
42    variants: {
43      status: {
44        default: "bg-muted/50 hover:bg-muted",
45      },
46    },
47  }
48);
49 
50export interface FriendListPlayer {
51  id: number;
52  name: string;
53  status: "online" | "ingame" | "away" | "offline";
54  avatar?: string;
55  avatarFallback?: string;
56  activity?: string;
57}
58export interface FriendListProps extends React.ComponentPropsWithoutRef<"div"> {
59  players: FriendListPlayer[];
60  className?: string;
61  showstatus?: boolean;
62  showactivity?: boolean;
63}
64export default function FriendList({
65  className,
66  showstatus = true,
67  showactivity = true,
68  players,
69  ...props
70}: FriendListProps){
71  return (
72    <div
73      className={cn("flex flex-col gap-6 w-full h-full", className)}
74      {...props}
75    >
76      <Card data-slot="friend-list" font={"retro"}>
77        <CardHeader>
78          <CardTitle className="text-xl sm:text-2xl  text-center gap-2">
79            Friends (
80            {
81              players.filter(
82                (player) =>
83                  player.status === "online" || player.status === "ingame"
84              ).length
85            }
86            /{players.length})
87          </CardTitle>
88        </CardHeader>
89        <CardContent className="space-y-5 px-1  min-w-[150px]">
90          <ScrollArea className="h-[400px]">
91            <div className="space-y-2 mx-8">
92              {players.map((player) => (
93                <div
94                  key={player.id}
95// … truncated