shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: cleanup components

Browse Source
This commit is contained in:
Henry
2024-08-15 23:14:21 +01:00
parent 31128119ac
commit f5a3d5089d
11 changed files with 195 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/board/components/DeleteBoardConfirmation.tsx
View File

@@ -4,6 +4,8 @@ import { api } from "~/utils/api";
import { useBoard } from "~/providers/board";
import { useModal } from "~/providers/modal";
import Button from "~/components/Button";
export function DeleteBoardConfirmation() {
const router = useRouter();
const { boardData } = useBoard();
@@ -33,19 +35,11 @@ export function DeleteBoardConfirmation() {
{"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()}
>
<div className="mt-5 flex justify-end space-x-2 sm:mt-6">
<Button onClick={() => closeModal()} variant="secondary">
Cancel
</button>
<button
onClick={handleDeleteBoard}
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>
</Button>
<Button onClick={handleDeleteBoard}>Delete</Button>
</div>
</div>
);

22
src/views/board/components/DeleteListConfirmation.tsx
View File

@@ -2,6 +2,8 @@ import { api } from "~/utils/api";
import { useBoard } from "~/providers/board";
import { useModal } from "~/providers/modal";
import Button from "~/components/Button";
interface DeleteListConfirmationProps {
listPublicId: string;
}
@@ -40,23 +42,13 @@ export function DeleteListConfirmation({
{"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()}
>
<div className="mt-5 flex justify-end space-x-2 sm:mt-6">
<Button onClick={() => closeModal()} variant="secondary">
Cancel
</button>
<button
onClick={() =>
deleteList.mutate({
listPublicId,
})
}
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"
>
</Button>
<Button onClick={() => deleteList.mutate({ listPublicId })}>
Delete
</button>
</Button>
</div>
</div>
);

64
src/views/board/components/NewCardForm.tsx
View File

@@ -1,22 +1,22 @@
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import ContentEditable from "react-contenteditable";
import { api } from "~/utils/api";
import {
HiXMark,
HiOutlineBarsArrowDown,
HiOutlineBarsArrowUp,
} from "react-icons/hi2";
import { Switch } from "@headlessui/react";
import Button from "~/components/Button";
import CheckboxDropdown from "~/components/CheckboxDropdown";
import Input from "~/components/Input";
import Toggle from "~/components/Toggle";
import { useBoard } from "~/providers/board";
import { useModal } from "~/providers/modal";
import { usePopup } from "~/providers/popup";
import { api } from "~/utils/api";
import { type NewCardInput } from "~/types/router.types";
type NewCardFormInput = NewCardInput & {
@@ -27,10 +27,6 @@ interface NewCardFormProps {
listPublicId: string;
}
function classNames(...classes: string[]): string {
return classes.filter(Boolean).join(" ");
}
export function NewCardForm({ listPublicId }: NewCardFormProps) {
const { boardData, addCard, refetchBoard } = useBoard();
const { showPopup } = usePopup();
@@ -168,20 +164,14 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
</div>
<div>
<input
id="title"
type="text"
{...register("title")}
placeholder="Card title"
className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-neutral-900 placeholder-dark-800 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
/>
<Input id="title" placeholder="Card title" {...register("title")} />
</div>
<div className="mt-2 ">
<ContentEditable
<Input
placeholder="Add description..."
html={watch("description") || ""}
onChange={(e) => setValue("description", e.target.value)}
className="block min-h-[70px] w-full rounded-md border-0 bg-dark-300 bg-white/5 px-3 py-1.5 text-light-900 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 focus-visible:outline-none dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
value={watch("description")}
contentEditable
/>
</div>
<div className="mt-2 flex space-x-1">
@@ -301,38 +291,14 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
</div>
<div className="mt-5 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
<div className="mr-4 flex items-center justify-end">
<span className="mr-2 text-xs text-light-900 dark:text-dark-900">
Create more
</span>
<Switch
checked={isCreateAnotherEnabled}
onChange={handleToggleCreateAnother}
className={classNames(
isCreateAnotherEnabled
? "bg-indigo-600"
: "bg-light-800 dark:bg-dark-800",
"relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none",
)}
>
<span className="sr-only">Create another</span>
<span
aria-hidden="true"
className={classNames(
isCreateAnotherEnabled ? "translate-x-2" : "translate-x-0",
"pointer-events-none inline-block h-3 w-3 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
)}
/>
</Switch>
</div>
<Toggle
label="Create another"
isChecked={isCreateAnotherEnabled}
onChange={handleToggleCreateAnother}
/>
<div>
<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 card
</button>
<Button type="submit">Create card</Button>
</div>
</div>
</form>

59
src/views/board/components/NewListForm.tsx
View File

@@ -1,19 +1,19 @@
import { useEffect } from "react";
import { api } from "~/utils/api";
import { useForm } from "react-hook-form";
import { HiXMark } from "react-icons/hi2";
import { Switch } from "@headlessui/react";
import { useBoard } from "~/providers/board";
import { useModal } from "~/providers/modal";
import { usePopup } from "~/providers/popup";
import { type NewListInput } from "~/types/router.types";
import { api } from "~/utils/api";
function classNames(...classes: string[]): string {
return classes.filter(Boolean).join(" ");
}
import Button from "~/components/Button";
import Input from "~/components/Input";
import Toggle from "~/components/Toggle";
import { type NewListInput } from "~/types/router.types";
type NewListFormInput = NewListInput & {
isCreateAnotherEnabled: boolean;
@@ -88,48 +88,19 @@ export function NewListForm({ boardPublicId }: { boardPublicId: string }) {
</button>
</div>
<input
id="list-name"
placeholder="List name"
{...register("name", { required: true })}
className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-neutral-900 placeholder-dark-800 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
/>
<Input id="list-name" placeholder="List name" {...register("name")} />
</div>
<div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
<div className="mr-4 flex items-center justify-end">
<span className="mr-2 text-xs text-light-900 dark:text-dark-900">
Create more
</span>
<Switch
checked={isCreateAnotherEnabled}
onChange={() =>
setValue("isCreateAnotherEnabled", !isCreateAnotherEnabled)
}
className={classNames(
isCreateAnotherEnabled
? "bg-indigo-600"
: "bg-light-800 dark:bg-dark-800",
"relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none",
)}
>
<span className="sr-only">Create another</span>
<span
aria-hidden="true"
className={classNames(
isCreateAnotherEnabled ? "translate-x-2" : "translate-x-0",
"pointer-events-none inline-block h-3 w-3 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
)}
/>
</Switch>
</div>
<Toggle
label="Create another"
isChecked={isCreateAnotherEnabled}
onChange={() =>
setValue("isCreateAnotherEnabled", !isCreateAnotherEnabled)
}
/>
<div>
<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 list
</button>
<Button type="submit">Create list</Button>
</div>
</div>
</form>