diff --git a/src/components/admin/resources/form.tsx b/src/components/admin/resources/form.tsx index 24251bb..f55e15d 100644 --- a/src/components/admin/resources/form.tsx +++ b/src/components/admin/resources/form.tsx @@ -3,24 +3,34 @@ import { SkillLevel, Skill, type PlatformLink, + Platform, } from "@prisma/client"; import Image from "next/image"; -import { PencilSquareIcon } from "@heroicons/react/24/solid"; -import { ChevronDownIcon, TrashIcon } from "@heroicons/react/24/outline"; +import { + PencilSquareIcon, + XCircleIcon as XCircleSolid, +} from "@heroicons/react/24/solid"; +import { + ChevronDownIcon, + TrashIcon, + XCircleIcon as XCircleOutline, +} from "@heroicons/react/24/outline"; import { PlusIcon } from "@heroicons/react/20/solid"; import { + DropdownSelector, MultiSelectorMany, MultiSelectorOption, SelectedManyContext, SimpleSelectorManyOption, } from "../../forms/selectors"; -import { InfoInputLine } from "~/components/forms/textInput"; +import { GenericInput, InfoInputLine } from "~/components/forms/textInput"; import { PriceIcon } from "~/prices/Icons"; import { type Dispatch, type SetStateAction, useState } from "react"; import { type UseFormReturn, FormProvider, useFormContext, + useForm, } from "react-hook-form"; import Modal from "react-modal"; import { type RouterInputs } from "~/utils/api"; @@ -72,6 +82,26 @@ const LinkModal = ({ isOpen: boolean; setOpen: Dispatch>; }) => { + const { register } = useForm(); + const platformTypeOptions = [ + { + label: "Website", + value: Platform.WEBSITE, + }, + { + label: "iOS App", + value: Platform.APP_IOS, + }, + { + label: "Android App", + value: Platform.APP_ANDROID, + }, + { + label: "PDF Document", + value: Platform.PDF, + }, + ]; + return ( -
-

Link Details

+
+
+

+ Platform Details +

+ + +
+ +
+ + +
); diff --git a/src/components/forms/selectors.tsx b/src/components/forms/selectors.tsx index f669f62..59a3082 100644 --- a/src/components/forms/selectors.tsx +++ b/src/components/forms/selectors.tsx @@ -1,5 +1,9 @@ import { createContext, useContext, useState } from "react"; -import { useFormContext, type UseFormRegisterReturn } from "react-hook-form"; +import { + type InternalFieldName, + useFormContext, + type UseFormRegisterReturn, +} from "react-hook-form"; // generics interface ToStringable { @@ -165,6 +169,45 @@ function SimpleSelectorManyOption({ ); } +interface SelectorOption< + T extends string | number | readonly string[] | undefined +> { + label: string; + value: T; +} + +function DropdownSelector< + TFieldName extends InternalFieldName, + T extends string | number | readonly string[] | undefined +>({ + options, + label, + placeholder, + details, +}: { + options: SelectorOption[]; + label: string; + placeholder?: string; + details: UseFormRegisterReturn; +}) { + return ( +
+ + +
+ ); +} + export { SelectedUniqueContext, SelectorContext, @@ -173,4 +216,5 @@ export { MultiSelector, MultiSelectorOption, SimpleSelectorManyOption, + DropdownSelector, }; diff --git a/src/components/forms/textInput.tsx b/src/components/forms/textInput.tsx index c584ede..29e51ac 100644 --- a/src/components/forms/textInput.tsx +++ b/src/components/forms/textInput.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { type HTMLInputTypeAttribute, useState } from "react"; import { type UseFormRegisterReturn, type InternalFieldName, @@ -8,9 +8,7 @@ import { * Single line input for the fields found to the right of the * resource logo. */ -function InfoInputLine< - TFieldName extends InternalFieldName = InternalFieldName ->({ +function InfoInputLine({ value, placeholder, hint, @@ -46,4 +44,30 @@ function InfoInputLine< ); } -export { InfoInputLine }; +function GenericInput({ + label, + placeholder, + type = "text", + details, +}: { + label: string; + placeholder?: string; + type: HTMLInputTypeAttribute; + details: UseFormRegisterReturn; +}) { + return ( +
+ + +
+ ); +} + +export { InfoInputLine, GenericInput };