feat: convert to pages router
This commit is contained in:
Henry
54
src/views/card/components/DeleteCardConfirmation.tsx
Normal file
54
src/views/card/components/DeleteCardConfirmation.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import { useRouter } from "next/navigation";
|
||||
import { api } from "~/utils/api";
|
||||
import { useModal } from "~/providers/modal";
|
||||
|
||||
interface DeleteCardConfirmationProps {
|
||||
cardPublicId: string;
|
||||
boardPublicId: string;
|
||||
}
|
||||
|
||||
export function DeleteCardConfirmation({
|
||||
cardPublicId,
|
||||
boardPublicId,
|
||||
}: DeleteCardConfirmationProps) {
|
||||
const { closeModal } = useModal();
|
||||
const router = useRouter();
|
||||
|
||||
const deleteCard = api.card.delete.useMutation({
|
||||
onSuccess: () => {
|
||||
closeModal();
|
||||
router.push(`/boards/${boardPublicId}`);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex w-full flex-col justify-between pb-4">
|
||||
<h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
|
||||
Are you sure you want to delete this card?
|
||||
</h2>
|
||||
<p className="text-sm font-medium text-light-900 dark:text-dark-900">
|
||||
{"This action can't be undone."}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-5 flex justify-end sm:mt-6">
|
||||
<button
|
||||
className="mr-4 inline-flex justify-center rounded-md border-[1px] border-light-600 bg-light-50 px-3 py-2 text-sm font-semibold text-neutral-900 shadow-sm focus-visible:outline-none dark:border-dark-600 dark:bg-dark-300 dark:text-dark-1000"
|
||||
onClick={() => closeModal()}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
deleteCard.mutate({
|
||||
cardPublicId,
|
||||
})
|
||||
}
|
||||
className="inline-flex justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
44
src/views/card/components/Dropdown.tsx
Normal file
44
src/views/card/components/Dropdown.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { Fragment } from "react";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { HiEllipsisHorizontal } from "react-icons/hi2";
|
||||
import { useModal } from "~/providers/modal";
|
||||
|
||||
export default function Dropdown() {
|
||||
const { openModal } = useModal();
|
||||
|
||||
return (
|
||||
<Menu as="div" className="relative inline-block text-left">
|
||||
<div>
|
||||
<Menu.Button className="flex h-8 w-8 items-center justify-center rounded-[5px] hover:bg-light-200 dark:hover:bg-dark-200">
|
||||
<HiEllipsisHorizontal
|
||||
size={25}
|
||||
className="text-light-900 dark:text-dark-900"
|
||||
/>
|
||||
</Menu.Button>
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute right-0 z-30 mt-2 w-56 origin-top-right rounded-md border border-light-200 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
|
||||
<div className="flex">
|
||||
<Menu.Item>
|
||||
<button
|
||||
onClick={() => openModal("DELETE_CARD")}
|
||||
className="m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
|
||||
>
|
||||
Delete card
|
||||
</button>
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
150
src/views/card/components/LabelSelector.tsx
Normal file
150
src/views/card/components/LabelSelector.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
import { Fragment } from "react";
|
||||
import { api } from "~/utils/api";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { HiMiniPlus } from "react-icons/hi2";
|
||||
import { useFormik } from "formik";
|
||||
|
||||
import { useModal } from "~/providers/modal";
|
||||
|
||||
interface LabelSelectorProps {
|
||||
cardPublicId: string;
|
||||
labels: {
|
||||
publicId: string;
|
||||
name: string;
|
||||
selected: boolean;
|
||||
colourCode: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
export default function LabelSelector({
|
||||
cardPublicId,
|
||||
labels,
|
||||
}: LabelSelectorProps) {
|
||||
const { openModal } = useModal();
|
||||
const utils = api.useUtils();
|
||||
|
||||
const refetchCard = () => utils.card.byId.refetch({ id: cardPublicId });
|
||||
|
||||
const addOrRemoveLabel = api.card.addOrRemoveLabel.useMutation({
|
||||
onSuccess: async () => {
|
||||
await refetchCard();
|
||||
},
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
...Object.fromEntries(
|
||||
labels?.map((label) => [label.publicId, label.selected]) ?? [],
|
||||
),
|
||||
},
|
||||
onSubmit: (values) => {
|
||||
console.log({ values });
|
||||
},
|
||||
enableReinitialize: true,
|
||||
});
|
||||
|
||||
const selectedLabels = labels.filter((label) => label.selected);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu
|
||||
as="div"
|
||||
className="relative flex w-full flex-wrap items-center text-left"
|
||||
>
|
||||
{selectedLabels.length ? (
|
||||
<>
|
||||
{selectedLabels.map((label) => (
|
||||
<Menu.Button
|
||||
key={label.publicId}
|
||||
className="my-1 mr-2 inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[12px] font-medium text-light-800 ring-1 ring-inset ring-light-600 dark:text-dark-1000 dark:ring-dark-800"
|
||||
>
|
||||
<svg
|
||||
fill={label.colourCode}
|
||||
className="h-2 w-2"
|
||||
viewBox="0 0 6 6"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx={3} cy={3} r={3} />
|
||||
</svg>
|
||||
<div>{label.name}</div>
|
||||
</Menu.Button>
|
||||
))}
|
||||
<Menu.Button className="my-1 inline-flex w-fit items-center gap-x-1.5 rounded-full py-1 pl-2 pr-4 text-[12px] font-medium text-dark-800 ring-inset ring-dark-800 hover:bg-light-400 dark:hover:bg-dark-200">
|
||||
<HiMiniPlus size={16} />
|
||||
Add label
|
||||
</Menu.Button>
|
||||
</>
|
||||
) : (
|
||||
<Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
|
||||
<HiMiniPlus size={22} className="pr-2" />
|
||||
Add label
|
||||
</Menu.Button>
|
||||
)}
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
|
||||
<div className="p-2">
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
{labels?.map((label) => (
|
||||
<Menu.Item key={label.publicId}>
|
||||
{() => (
|
||||
<div
|
||||
key={label.publicId}
|
||||
className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
|
||||
onClick={async (e) => {
|
||||
e.preventDefault();
|
||||
await formik.setFieldValue(
|
||||
label.publicId,
|
||||
!formik.values[label.publicId],
|
||||
);
|
||||
|
||||
addOrRemoveLabel.mutate({
|
||||
cardPublicId,
|
||||
labelPublicId: label.publicId,
|
||||
});
|
||||
|
||||
await formik.submitForm();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id={label.publicId}
|
||||
name={label.publicId}
|
||||
type="checkbox"
|
||||
className="h-[14px] w-[14px] rounded bg-transparent"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onChange={formik.handleChange}
|
||||
checked={formik.values[label.publicId]}
|
||||
/>
|
||||
<label
|
||||
htmlFor={label.publicId}
|
||||
className="ml-3 text-sm"
|
||||
>
|
||||
{label.name}
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
<button
|
||||
onClick={() => openModal("NEW_LABEL")}
|
||||
className="flex w-full items-center rounded-[5px] p-1.5 px-2 text-sm hover:bg-light-200 dark:hover:bg-dark-300"
|
||||
>
|
||||
<HiMiniPlus size={22} className="pr-2" />
|
||||
Create new label
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
}
|
||||
107
src/views/card/components/ListSelector.tsx
Normal file
107
src/views/card/components/ListSelector.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import { Fragment } from "react";
|
||||
import { api } from "~/utils/api";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { useFormik } from "formik";
|
||||
|
||||
interface ListSelectorProps {
|
||||
cardPublicId: string;
|
||||
lists: {
|
||||
publicId: string;
|
||||
name: string;
|
||||
selected: boolean;
|
||||
}[];
|
||||
}
|
||||
|
||||
export default function ListSelector({
|
||||
cardPublicId,
|
||||
lists,
|
||||
}: ListSelectorProps) {
|
||||
const utils = api.useUtils();
|
||||
|
||||
const refetchCard = () => utils.card.byId.refetch({ id: cardPublicId });
|
||||
|
||||
const updateCardList = api.card.reorder.useMutation({
|
||||
onSuccess: async () => {
|
||||
await refetchCard();
|
||||
},
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
...Object.fromEntries(
|
||||
lists?.map((list) => [list.publicId, list.selected]) ?? [],
|
||||
),
|
||||
},
|
||||
onSubmit: (values) => {
|
||||
console.log({ values });
|
||||
},
|
||||
enableReinitialize: true,
|
||||
});
|
||||
|
||||
const selectedList = lists.find((list) => list.selected);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu
|
||||
as="div"
|
||||
className="relative flex w-full flex-wrap items-center text-left"
|
||||
>
|
||||
<Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
|
||||
{selectedList?.name}
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
|
||||
<div className="p-2">
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
{lists?.map((list) => (
|
||||
<Menu.Item key={list.publicId}>
|
||||
<div
|
||||
key={list.publicId}
|
||||
className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
|
||||
onClick={async (e) => {
|
||||
e.preventDefault();
|
||||
await formik.setFieldValue(
|
||||
list.publicId,
|
||||
!formik.values[list.publicId],
|
||||
);
|
||||
|
||||
updateCardList.mutate({
|
||||
cardId: cardPublicId,
|
||||
newListId: list.publicId,
|
||||
});
|
||||
|
||||
await formik.submitForm();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id={list.publicId}
|
||||
name={list.publicId}
|
||||
type="checkbox"
|
||||
className="h-[14px] w-[14px] rounded bg-transparent"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onChange={formik.handleChange}
|
||||
checked={formik.values[list.publicId]}
|
||||
/>
|
||||
<label htmlFor={list.publicId} className="ml-3 text-sm">
|
||||
{list.name}
|
||||
</label>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
))}
|
||||
</form>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
}
|
||||
134
src/views/card/components/MemberSelector.tsx
Normal file
134
src/views/card/components/MemberSelector.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import { Fragment } from "react";
|
||||
import { api } from "~/utils/api";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { HiMiniPlus } from "react-icons/hi2";
|
||||
import { useFormik } from "formik";
|
||||
|
||||
interface MemberSelectorProps {
|
||||
cardPublicId: string;
|
||||
members: {
|
||||
publicId: string;
|
||||
user: {
|
||||
id: string;
|
||||
name: string | null;
|
||||
};
|
||||
selected: boolean;
|
||||
}[];
|
||||
}
|
||||
|
||||
export default function LabelSelector({
|
||||
cardPublicId,
|
||||
members,
|
||||
}: MemberSelectorProps) {
|
||||
const utils = api.useUtils();
|
||||
|
||||
const refetchCard = () => utils.card.byId.refetch({ id: cardPublicId });
|
||||
|
||||
const addOrRemoveMember = api.card.addOrRemoveMember.useMutation({
|
||||
onSuccess: async () => {
|
||||
await refetchCard();
|
||||
},
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
...Object.fromEntries(
|
||||
members?.map((member) => [member.publicId, member.selected]) ?? [],
|
||||
),
|
||||
},
|
||||
onSubmit: (values) => {
|
||||
console.log({ values });
|
||||
},
|
||||
enableReinitialize: true,
|
||||
});
|
||||
|
||||
const selectedMembers = members.filter((member) => member.selected);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu
|
||||
as="div"
|
||||
className="relative flex w-full flex-wrap items-center text-left"
|
||||
>
|
||||
<Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
|
||||
{selectedMembers.length ? (
|
||||
<div className="isolate flex -space-x-1 overflow-hidden">
|
||||
{selectedMembers.map((member) => (
|
||||
<span
|
||||
key={member.publicId}
|
||||
className="relative z-30 inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 ring-1 ring-light-200 dark:ring-dark-100"
|
||||
>
|
||||
<span className="text-[10px] font-medium leading-none text-white">
|
||||
{member.user?.name
|
||||
? member.user?.name
|
||||
.split(" ")
|
||||
.map((namePart) => namePart.charAt(0).toUpperCase())
|
||||
.join("")
|
||||
: null}
|
||||
</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<HiMiniPlus size={22} className="pr-2" />
|
||||
{"Add member"}
|
||||
</>
|
||||
)}
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
|
||||
<div className="p-2">
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
{members?.map((member) => (
|
||||
<Menu.Item key={member.publicId}>
|
||||
<div
|
||||
key={member.publicId}
|
||||
className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
|
||||
onClick={async (e) => {
|
||||
e.preventDefault();
|
||||
await formik.setFieldValue(
|
||||
member.publicId,
|
||||
!formik.values[member.publicId],
|
||||
);
|
||||
|
||||
addOrRemoveMember.mutate({
|
||||
cardPublicId,
|
||||
workspaceMemberPublicId: member.publicId,
|
||||
});
|
||||
|
||||
await formik.submitForm();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id={member.publicId}
|
||||
name={member.publicId}
|
||||
type="checkbox"
|
||||
className="h-[14px] w-[14px] rounded bg-transparent"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onChange={formik.handleChange}
|
||||
checked={formik.values[member.publicId]}
|
||||
/>
|
||||
<label htmlFor={member.publicId} className="ml-3 text-sm">
|
||||
{member?.user?.name}
|
||||
</label>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
))}
|
||||
</form>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
}
|
||||
163
src/views/card/components/NewLabelForm.tsx
Normal file
163
src/views/card/components/NewLabelForm.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
import { Fragment, useState } from "react";
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
import { api } from "~/utils/api";
|
||||
|
||||
import { HiChevronUpDown, HiXMark } from "react-icons/hi2";
|
||||
|
||||
import { useModal } from "~/providers/modal";
|
||||
|
||||
import { Formik, Form, Field } from "formik";
|
||||
|
||||
interface FormValues {
|
||||
name: string;
|
||||
colour: Colour | undefined;
|
||||
}
|
||||
|
||||
interface Colour {
|
||||
name: string;
|
||||
code: string;
|
||||
}
|
||||
|
||||
interface cardPublicId {
|
||||
cardPublicId: string;
|
||||
}
|
||||
|
||||
const colours = [
|
||||
{ name: "Teal", code: "#0d9488" },
|
||||
{ name: "Green", code: "#65a30d" },
|
||||
{ name: "Blue", code: "#0284c7" },
|
||||
{ name: "Purple", code: "#4f46e5" },
|
||||
{ name: "Yellow", code: "#ca8a04" },
|
||||
{ name: "Orange", code: "#ea580c " },
|
||||
{ name: "Red", code: "#dc2626" },
|
||||
{ name: "Pink", code: "#db2777" },
|
||||
];
|
||||
|
||||
export function NewLabelForm({ cardPublicId }: cardPublicId) {
|
||||
const [selected, setSelected] = useState(colours[0]);
|
||||
const utils = api.useUtils();
|
||||
const { closeModal } = useModal();
|
||||
|
||||
const refetchCard = () => utils.card.byId.refetch({ id: cardPublicId });
|
||||
|
||||
const createLabel = api.label.create.useMutation({
|
||||
onSuccess: async () => {
|
||||
try {
|
||||
await refetchCard();
|
||||
closeModal();
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
|
||||
<h2 className="text-sm font-medium">New label</h2>
|
||||
<button
|
||||
className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
|
||||
onClick={() => closeModal()}
|
||||
>
|
||||
<HiXMark size={18} className="text-light-900 dark:text-dark-900" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Formik
|
||||
initialValues={{
|
||||
name: "",
|
||||
colour: colours[0],
|
||||
}}
|
||||
onSubmit={(values: FormValues) => {
|
||||
if (!values.colour?.code) return;
|
||||
|
||||
createLabel.mutate({
|
||||
name: values.name,
|
||||
cardPublicId,
|
||||
colourCode: values.colour.code,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Form>
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<Field
|
||||
id="name"
|
||||
name="name"
|
||||
className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
<Listbox value={selected} onChange={setSelected}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="relative mt-4">
|
||||
<Listbox.Button className="block w-full rounded-md border-0 bg-white/5 px-4 py-1.5 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6">
|
||||
<span className="flex items-center">
|
||||
<span
|
||||
style={{ backgroundColor: selected?.code }}
|
||||
className={`inline-block h-2 w-2 flex-shrink-0 rounded-full`}
|
||||
/>
|
||||
<span className="ml-3 block truncate">
|
||||
{selected?.name}
|
||||
</span>
|
||||
</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<HiChevronUpDown
|
||||
className="h-5 w-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-light-50 py-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-dark-300 sm:text-sm">
|
||||
{colours.map((colour, index) => (
|
||||
<Listbox.Option
|
||||
key={`colours_${index}`}
|
||||
className="relative cursor-default select-none px-2 text-neutral-900 dark:text-dark-1000 "
|
||||
value={colour}
|
||||
>
|
||||
{() => (
|
||||
<>
|
||||
<div className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-400">
|
||||
<span
|
||||
style={{ backgroundColor: colour?.code }}
|
||||
className="ml-2 inline-block h-2 w-2 flex-shrink-0 rounded-full"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="ml-3 block truncate font-normal">
|
||||
{colour.name}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
<div className="mt-5 sm:mt-6">
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
|
||||
>
|
||||
Create label
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user