studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(demo) use modal to show create form

Browse Source 
Now that we have a modal component, let's use it to display our creation
 form.
This commit is contained in:
jbpenrath
2024-02-15 00:57:41 +01:00
committed by Jean-Baptiste PENRATH
parent 7913075faf
commit 86138df8fe
4 changed files with 114 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
apps/demo/src/Create.tsx
View File

@@ -7,6 +7,8 @@ import {
DateRangePicker,
FileUploader,
Input,
Modal,
ModalSize,
Radio,
RadioGroup,
Select,
@@ -16,10 +18,10 @@ import {
VariantType,
} from "@openfun/cunningham-react";
import { faker } from "@faker-js/faker";
import { PageProps } from "./App";
import { Character, database, randomDates } from "./Character";
import { Page, PageProps } from "./App";
export const Create = ({ changePage }: PageProps) => {
export const Create = (props: PageProps) => {
const { toast } = useToastProvider();
const submit: React.FormEventHandler<HTMLFormElement> = (e) => {
@@ -40,102 +42,104 @@ export const Create = ({ changePage }: PageProps) => {
};
database.unshift(character);
changePage(Page.HOME);
props.close();
toast("Character created successfully", VariantType.SUCCESS);
};
return (
<form className="page__create clr-greyscale-900" onSubmit={submit}>
<h1>Add a character</h1>
<div className="card">
<h3 className="fw-bold fs-h3">General Information</h3>
<Alert type={VariantType.INFO}>
You are about to add a new character to the collection
</Alert>
<Input
name="name"
label="Name"
text="Enter first and last name"
fullWidth={true}
required
/>
<Select
name="sex"
label="Sex"
fullWidth={true}
options={[
{
label: "Female",
value: "female",
},
{
label: "Male",
value: "male",
},
]}
/>
<DatePicker name="birthdate" label="Birth Date" fullWidth={true} />
<DateRangePicker
name="appearance_dates"
startLabel="First appearance"
endLabel="Last appearance"
fullWidth={true}
/>
<Checkbox name="is_guest" label="This character is a guest" />
</div>
<div className="card mt-l">
<h3 className="fw-bold fs-h3">Bio</h3>
<Alert type={VariantType.WARNING}>
Please be exhaustive, every detail counts!
</Alert>
<TextArea
name="bio"
label="Biography"
text="Enter a detailed biography"
fullWidth={true}
rows={8}
/>
<RadioGroup>
<Radio
label="Appeared between 0 and 5 times"
name="occurences"
value="A"
<Modal {...props} size={ModalSize.LARGE} closeOnClickOutside>
<form className="page__create clr-greyscale-900" onSubmit={submit}>
<h1>Add a character</h1>
<div className="card">
<h3 className="fw-bold fs-h3">General Information</h3>
<Alert type={VariantType.INFO}>
You are about to add a new character to the collection
</Alert>
<Input
name="name"
label="Name"
text="Enter first and last name"
fullWidth={true}
required
/>
<Radio
label="Appeared between 6 and 10 times"
name="occurences"
value="B"
<Select
name="sex"
label="Sex"
fullWidth={true}
options={[
{
label: "Female",
value: "female",
},
{
label: "Male",
value: "male",
},
]}
/>
<Radio
label="Appeared between 10 and 20 times"
name="occurences"
value="C"
<DatePicker name="birthdate" label="Birth Date" fullWidth={true} />
<DateRangePicker
name="appearance_dates"
startLabel="First appearance"
endLabel="Last appearance"
fullWidth={true}
/>
<Radio
label="Appeared between 20+ times"
name="occurences"
value="D"
<Checkbox name="is_guest" label="This character is a guest" />
</div>
<div className="card mt-l">
<h3 className="fw-bold fs-h3">Bio</h3>
<Alert type={VariantType.WARNING}>
Please be exhaustive, every detail counts!
</Alert>
<TextArea
name="bio"
label="Biography"
text="Enter a detailed biography"
fullWidth={true}
rows={8}
/>
</RadioGroup>
<Switch name="is_public" label="Make this character public" />
<div>
<h4>Add pictures</h4>
<div className="mt-s">
<FileUploader
fullWidth={true}
text="JPG, PNG or GIF - Max file size 2MB"
multiple={true}
<RadioGroup>
<Radio
label="Appeared between 0 and 5 times"
name="occurences"
value="A"
/>
<Radio
label="Appeared between 6 and 10 times"
name="occurences"
value="B"
/>
<Radio
label="Appeared between 10 and 20 times"
name="occurences"
value="C"
/>
<Radio
label="Appeared between 20+ times"
name="occurences"
value="D"
/>
</RadioGroup>
<Switch name="is_public" label="Make this character public" />
<div>
<h4>Add pictures</h4>
<div className="mt-s">
<FileUploader
fullWidth={true}
text="JPG, PNG or GIF - Max file size 2MB"
multiple={true}
/>
</div>
</div>
</div>
</div>
<div className="mt-l">
<Button fullWidth={true} type="submit">
Add character
</Button>
</div>
</form>
<div className="mt-l">
<Button fullWidth={true} type="submit">
Add character
</Button>
</div>
</form>
</Modal>
);
};