
* feat: add crowdin and supported languages * fix: main branch name * feat: test crowdin integration * feat: add crowdin config skeleton * feat: update crowdin.yml * fix: remove ro translation * test: en translation * test: en translation * New Crowdin translations by Github Action (#735) Co-authored-by: Crowdin Bot <support+bot@crowdin.com> * test: en translation * fix: separate upload/download workflows * wip * New Crowdin translations by Github Action (#738) Co-authored-by: Crowdin Bot <support+bot@crowdin.com> * wip * wip * wip * wip * wip * typo * wip * wip * update crowdin config * update * chore: support i18n de,es,fr,it,pt,ru,ro,en * chore: extract i18n strings * chore: extract booking components strings for i18n * wip * extract more strings * wip * fallback to getServerSideProps for now * New Crowdin translations by Github Action (#874) Co-authored-by: Crowdin Bot <support+bot@crowdin.com> * fix: minor fixes on the datepicker * fix: add dutch lang * fix: linting issues * fix: string * fix: update GHA * cleanup trpc * fix linting Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
99 lines
3.8 KiB
TypeScript
99 lines
3.8 KiB
TypeScript
import { DotsHorizontalIcon, UserRemoveIcon } from "@heroicons/react/outline";
|
|
import { useState } from "react";
|
|
|
|
import { useLocale } from "@lib/hooks/useLocale";
|
|
import { Member } from "@lib/member";
|
|
|
|
import { Dialog, DialogTrigger } from "@components/Dialog";
|
|
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
|
|
import Avatar from "@components/ui/Avatar";
|
|
import Button from "@components/ui/Button";
|
|
|
|
import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/Dropdown";
|
|
|
|
export default function MemberListItem(props: {
|
|
localeProp: string;
|
|
member: Member;
|
|
onActionSelect: (text: string) => void;
|
|
onChange: (text: string) => void;
|
|
}) {
|
|
const [member] = useState(props.member);
|
|
const { t, locale } = useLocale({ localeProp: props.localeProp });
|
|
|
|
return (
|
|
member && (
|
|
<li className="divide-y">
|
|
<div className="flex justify-between my-4">
|
|
<div className="flex">
|
|
<Avatar
|
|
imageSrc={
|
|
props.member.avatar
|
|
? props.member.avatar
|
|
: "https://eu.ui-avatars.com/api/?background=fff&color=039be5&name=" +
|
|
encodeURIComponent(props.member.name || "")
|
|
}
|
|
displayName={props.member.name || ""}
|
|
className="rounded-full w-9 h-9"
|
|
/>
|
|
<div className="inline-block ml-3">
|
|
<span className="text-sm font-bold text-neutral-700">{props.member.name}</span>
|
|
<span className="block -mt-1 text-xs text-gray-400">{props.member.email}</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex">
|
|
{props.member.role === "INVITEE" && (
|
|
<>
|
|
<span className="self-center h-6 px-3 py-1 mr-2 text-xs text-yellow-700 capitalize rounded-md bg-yellow-50">
|
|
{t("pending")}
|
|
</span>
|
|
<span className="self-center h-6 px-3 py-1 mr-4 text-xs text-pink-700 capitalize rounded-md bg-pink-50">
|
|
{t("member")}
|
|
</span>
|
|
</>
|
|
)}
|
|
{props.member.role === "MEMBER" && (
|
|
<span className="self-center h-6 px-3 py-1 mr-4 text-xs text-pink-700 capitalize rounded-md bg-pink-50">
|
|
{t("member")}
|
|
</span>
|
|
)}
|
|
{props.member.role === "OWNER" && (
|
|
<span className="self-center h-6 px-3 py-1 mr-4 text-xs text-blue-700 capitalize rounded-md bg-blue-50">
|
|
{t("owner")}
|
|
</span>
|
|
)}
|
|
<Dropdown>
|
|
<DropdownMenuTrigger>
|
|
<DotsHorizontalIcon className="w-5 h-5" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuItem>
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
color="warn"
|
|
StartIcon={UserRemoveIcon}
|
|
className="w-full">
|
|
{t("remove_member")}
|
|
</Button>
|
|
</DialogTrigger>
|
|
<ConfirmationDialogContent
|
|
localeProp={locale}
|
|
variety="danger"
|
|
title={t("remove_member")}
|
|
confirmBtnText={t("confirm_remove_member")}
|
|
onConfirm={() => props.onActionSelect("remove")}>
|
|
{t("remove_member_confirmation_message")}
|
|
</ConfirmationDialogContent>
|
|
</Dialog>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
)
|
|
);
|
|
}
|