Tristan Yang
77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { NavLink, useLocation } from "react-router-dom";
|
|
import Tippy from "@tippyjs/react";
|
|
|
|
import { useAppSelector } from "@/app/store";
|
|
import IconAdd from "@/assets/icons/add.svg";
|
|
import AddEntriesMenu from "./AddEntriesMenu";
|
|
import Tooltip from "./Tooltip";
|
|
|
|
type Props = {
|
|
readonly?: boolean;
|
|
};
|
|
export default function Server({ readonly = false }: Props) {
|
|
const { t } = useTranslation();
|
|
const { pathname } = useLocation();
|
|
const { server, userCount } = useAppSelector((store) => {
|
|
return {
|
|
userCount: store.users.ids.length,
|
|
server: store.server
|
|
};
|
|
});
|
|
// console.log("server info", server);
|
|
const { name, description, logo } = server;
|
|
if (readonly)
|
|
return (
|
|
<NavLink to={"/"} className="relative flex items-center justify-between gap-2 px-4 py-2">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8">
|
|
<img
|
|
alt={`${name} logo`}
|
|
className="w-full h-full object-cover rounded-full"
|
|
src={logo}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<h3 className="text-sm text-gray-600 dark:text-gray-100" title={description}>
|
|
{name}
|
|
</h3>
|
|
<span className="text-xs text-gray-500">
|
|
{userCount} {t("members")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</NavLink>
|
|
);
|
|
|
|
return (
|
|
<div className="relative flex items-center justify-between gap-2 px-4 py-2">
|
|
<NavLink to={`/setting/overview?f=${pathname}`}>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8">
|
|
<img
|
|
alt={`${name} logo`}
|
|
className="w-full h-full object-cover rounded-full"
|
|
src={logo}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<h3 className="text-sm text-gray-600 font-bold dark:text-gray-100" title={description}>
|
|
{name}
|
|
</h3>
|
|
<span className="text-xs text-gray-500">
|
|
{userCount} {t("members")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</NavLink>
|
|
|
|
<Tooltip tip={t("more")} placement="bottom">
|
|
<Tippy interactive placement="bottom-end" trigger="click" content={<AddEntriesMenu />}>
|
|
<IconAdd className="dark:fill-gray-400" role="button" />
|
|
</Tippy>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
}
|