brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add description input field

Browse Source
This commit is contained in:
Brandon Egger 2023-06-05 00:39:49 -05:00
parent 3d89632047
commit 15cefe4eef
2 changed files with 50 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ResourceTable.tsx
View File

@ -97,7 +97,7 @@ export const ResourceDescription = ({
}
return (
<div className="border-t-[4px] border-neutral-700 bg-neutral-600 p-2">
<div className="border-b-[4px] border-neutral-700 bg-neutral-600 p-2">
<h3 className="text-sm font-bold text-neutral-100">IMPORTANT</h3>
<p className="text-sm text-neutral-300">
{manufacturer.notice

59
src/components/admin/resources/form.tsx
View File

@ -6,6 +6,7 @@ import {
} from "@prisma/client";
import Image from "next/image";
import { PencilSquareIcon } from "@heroicons/react/24/solid";
import { ChevronDownIcon } from "@heroicons/react/24/outline";
import {
MultiSelector,
MultiSelectorMany,
@ -15,6 +16,7 @@ import {
} from "../../forms/selectors";
import { InfoInputLine } from "~/components/forms/textInput";
import { PriceIcon } from "~/prices/Icons";
import { useState } from "react";
/**
* Renders the image selector for resource form.
@ -189,27 +191,64 @@ const ResourceSummarySubForm = ({
);
};
// TODO:
// const ResourceDescriptionSubForm = ({
// resource,
// }: {
// resource?: AuditoryResource;
// }) => {
// return <div></div>;
// };
const ResourceDescriptionSubForm = ({
resource,
}: {
resource?: AuditoryResource;
}) => {
const [dropdownOpen, toggleDropdown] = useState(false);
return (
<div className="mx-4">
<label className="text-md font-semibold">Description</label>
<div className="relative mt-4 overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 text-left shadow">
<button
onClick={() => {
toggleDropdown(!dropdownOpen);
}}
className="group flex w-full flex-row justify-between border-b-[4px] border-neutral-700 bg-neutral-600 p-2 align-middle"
>
<section className="space-x-2">
<h3 className="inline text-sm font-bold text-neutral-100">
IMPORTANT
</h3>
<span className="inline italic text-neutral-300">open to edit</span>
</section>
<ChevronDownIcon className="mx-2 my-auto w-4 text-white group-hover:animate-bounce" />
</button>
<textarea
className={
"h-48 w-full rounded-b-xl p-2" + (dropdownOpen ? " hidden" : "")
}
>
{resource?.description}
</textarea>
<textarea
className={
"h-48 w-full rounded-b-xl bg-neutral-800 p-2 text-white" +
(dropdownOpen ? "" : " hidden")
}
>
{resource?.manufacturer?.notice}
</textarea>
</div>
</div>
);
};
const ResourceForm = ({ resource }: { resource?: AuditoryResource }) => {
return (
<div className="mx-auto flex max-w-2xl flex-col flex-col-reverse py-1 sm:flex-row sm:divide-x sm:py-4">
<div className="my-5 mr-4 flex flex-col justify-end text-lg font-bold">
<div className="my-5 mr-4 flex flex-col text-lg font-bold">
<ResourceLinkSubForm /> {/** //resource={resource} /> */}
</div>
<div>
<h1 className="mx-4 mb-2 border-b border-neutral-400 text-xl font-bold sm:hidden">
General
</h1>
<div className="justify-left mx-auto flex max-w-lg flex-col pb-5">
<div className="justify-left mx-auto flex max-w-lg flex-col space-y-4 pb-5">
<ResourceSummarySubForm resource={resource} />
<ResourceDescriptionSubForm resource={resource} />
</div>
</div>
</div>