frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🏗 Building out the metadata form

Browse Source
This commit is contained in:
Rishi Ghan
2021-12-10 11:30:54 -08:00
parent 1bf4fd3423
commit 3017920fb7
3 changed files with 107 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/client/components/ComicDetail/EditMetadataPanel.tsx
View File

@@ -1,9 +1,14 @@
import React, { ReactElement } from "react";
import { Form, Field } from "react-final-form";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export const EditMetadataPanel = (props): ReactElement => {
const validate = async () => {};
const onSubmit = async () => {};
const DayPickerAdapter = ({ input, ...rest }) => {
return <DatePicker {...input} {...rest} />;
};
return (
<>
<Form
@@ -11,44 +16,76 @@ export const EditMetadataPanel = (props): ReactElement => {
validate={validate}
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<h2>Metadata</h2>
{/* Issue Name */}
<div className="field is-horizontal">
<div className="field-label is-normal">
<label className="label">Issue Name</label>
<label className="label">Issue Details</label>
</div>
<div className="field-body">
<div className="field">
<Field name="issue_name">
{(props) => (
<p className="control is-expanded has-icons-left">
<input
className="input"
type="text"
placeholder="Name"
/>
<span className="icon is-small is-left">
<i className="fas fa-user"></i>
</span>
</p>
)}
</Field>
<p className="control is-expanded has-icons-left">
<Field
name="issue_name"
component="input"
className="input"
placeholder="Issue Name"
/>
<span className="icon is-small is-left">
<i className="fa-solid fa-user-ninja"></i>
</span>
</p>
</div>
</div>
</div>
{/* Issue Number and year */}
<div className="field is-horizontal">
<div className="field-label"></div>
<div className="field-body">
<div className="field is-expanded">
<div className="field">
<p className="control">
<Field
name="issue_number"
component="input"
className="input"
placeholder="Issue Number"
/>
</p>
</div>
<p className="help">Do not enter the first zero</p>
</div>
{/* year */}
<div className="field">
<Field name="issue_number">
{(props) => (
<p className="control is-expanded has-icons-left">
<input
className="input"
type="text"
placeholder="Name"
/>
<span className="icon is-small is-left">
<i className="fas fa-user"></i>
</span>
</p>
)}
</Field>
<p className="control">
<Field
name="issue_year"
component={DayPickerAdapter}
className="input"
placeholder="Issue Year"
/>
</p>
</div>
</div>
</div>
{/* Story title */}
<div className="field is-horizontal">
<div className="field-label is-normal">
<label className="label">Story</label>
</div>
<div className="field-body">
<div className="field">
<p className="control is-expanded has-icons-left">
<Field
name="story_title"
component="input"
className="input"
placeholder="Story Title"
/>
<span className="icon is-small is-left">
<i className="fa-solid fa-user-ninja"></i>
</span>
</p>
</div>
</div>
</div>