30 lines
1.1 KiB
JavaScript
30 lines
1.1 KiB
JavaScript
import React from "react";
|
|
|
|
const servers = [
|
|
{ id: "foundation", label: "F", active: true, className: "foundation" },
|
|
{ id: "corporation", label: "C", active: false, className: "corporation" },
|
|
{ id: "labs", label: "L", active: false, className: "labs" },
|
|
{ id: "divider" },
|
|
{ id: "community1", label: "AG", active: false, className: "community" },
|
|
{ id: "community2", label: "RD", active: false, className: "community" },
|
|
{ id: "add", label: "+", active: false, className: "community" },
|
|
];
|
|
|
|
export default function ServerList() {
|
|
return (
|
|
<div className="server-list flex flex-col items-center py-3 gap-3 w-20 bg-[#0d0d0d] border-r border-[#1a1a1a]">
|
|
{servers.map((srv, i) =>
|
|
srv.id === "divider" ? (
|
|
<div key={i} className="server-divider w-10 h-0.5 bg-[#1a1a1a] my-1" />
|
|
) : (
|
|
<div
|
|
key={srv.id}
|
|
className={`server-icon ${srv.className} ${srv.active ? "active" : ""} w-14 h-14 rounded-xl flex items-center justify-center font-bold text-lg cursor-pointer transition-all relative`}
|
|
>
|
|
{srv.label}
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
);
|
|
}
|