75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
import { useQuery } from "react-query";
|
|
import { DesktopSidebar } from "./DesktopSidebar";
|
|
import { MobileSidebar } from "./MobileSidebar";
|
|
import { Brand } from "./Brand";
|
|
import { Wave } from "./Wave";
|
|
import { GuildEntry } from "./GuildEntry";
|
|
import { fetchUserGuilds, GuildInfo } from "../../api";
|
|
import { TimezonePicker } from "../TimezonePicker";
|
|
import "./styles.scss";
|
|
|
|
type ContentProps = {
|
|
guilds: GuildInfo[];
|
|
};
|
|
|
|
const SidebarContent = ({ guilds }: ContentProps) => {
|
|
const guildEntries = guilds.map((guild) => <GuildEntry guild={guild}></GuildEntry>);
|
|
|
|
return (
|
|
<>
|
|
<a href="/">
|
|
<Brand />
|
|
</a>
|
|
<Wave />
|
|
<aside class="menu">
|
|
<p class="menu-label">Servers</p>
|
|
<ul class="menu-list guildList">{guildEntries}</ul>
|
|
<div
|
|
class="aside-footer"
|
|
style={{
|
|
position: "sticky",
|
|
bottom: "0px",
|
|
backgroundColor: "rgb(54, 54, 54)",
|
|
}}
|
|
>
|
|
<p class="menu-label">Options</p>
|
|
<ul class="menu-list">
|
|
<li>
|
|
<div id="bottom-sidebar"></div>
|
|
<TimezonePicker />
|
|
<a href="/login/discord/logout">
|
|
<span class="icon">
|
|
<i class="fas fa-sign-out"></i>
|
|
</span>{" "}
|
|
Log out
|
|
</a>
|
|
<a href="https://discord.jellywx.com" class="feedback">
|
|
<span class="icon">
|
|
<i class="fab fa-discord"></i>
|
|
</span>{" "}
|
|
Give feedback
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const Sidebar = () => {
|
|
const { status, data } = useQuery(fetchUserGuilds());
|
|
|
|
let content = <SidebarContent guilds={[]}></SidebarContent>;
|
|
if (status === "success") {
|
|
content = <SidebarContent guilds={data}></SidebarContent>;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<DesktopSidebar>{content}</DesktopSidebar>
|
|
<MobileSidebar>{content}</MobileSidebar>
|
|
</>
|
|
);
|
|
};
|