rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: improve activity type chooser UI

Browse source
This commit is contained in:
swve 2023-04-08 20:28:51 +02:00
parent 5eabb0b16a
commit 7202baa122
7 changed files with 149 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

36
front/components/Pages/CourseEdit/NewActivityModal/DynamicCanva.tsx
View file

@ -1,4 +1,6 @@
import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form";
import React, { useState } from "react";
import * as Form from '@radix-ui/react-form';
function DynamicCanvaModal({ submitActivity, chapterId }: any) {
const [activityName, setActivityName] = useState("");
@ -22,14 +24,32 @@ function DynamicCanvaModal({ submitActivity, chapterId }: any) {
});
};
return (
<div>
<div>
<input type="text" onChange={handleActivityNameChange} placeholder="Activity Name" /> <br />
<input type="text" onChange={handleActivityDescriptionChange} placeholder="Activity Description" />
<br />
<button onClick={handleSubmit}>Add Activity</button>
</div>
</div>
<FormLayout onSubmit={handleSubmit}>
<FormField name="dynamic-activity-name">
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
<FormLabel>Activity name</FormLabel>
<FormMessage match="valueMissing">Please provide a name for your activity</FormMessage>
</Flex>
<Form.Control asChild>
<Input onChange={handleActivityNameChange} type="text" required />
</Form.Control>
</FormField>
<FormField name="dynamic-activity-desc">
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
<FormLabel>Activity description</FormLabel>
<FormMessage match="valueMissing">Please provide a description for your activity</FormMessage>
</Flex>
<Form.Control asChild>
<Textarea onChange={handleActivityDescriptionChange} required />
</Form.Control>
</FormField>
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
<Form.Submit asChild>
<ButtonBlack type="submit" css={{ marginTop: 10 }}>Create Activity</ButtonBlack>
</Form.Submit>
</Flex>
</FormLayout>
);
}

38
front/components/Pages/CourseEdit/NewActivityModal/Video.tsx
View file

@ -1,4 +1,6 @@
import React from "react";
import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form";
import React, { useState } from "react";
import * as Form from '@radix-ui/react-form';
function VideoModal({ submitFileActivity, chapterId }: any) {
const [video, setVideo] = React.useState(null) as any;
@ -21,16 +23,32 @@ function VideoModal({ submitFileActivity, chapterId }: any) {
and the actual upload isn't happening here anyway, it's in the submitFileActivity function */
return (
<div>
<input type="text" placeholder="video title" onChange={handleNameChange} />
<br />
<br />
<input type="file" onChange={handleVideoChange} name="video" id="" />
<br />
<FormLayout onSubmit={handleSubmit}>
<FormField name="video-activity-name">
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
<FormLabel>Video name</FormLabel>
<FormMessage match="valueMissing">Please provide a name for your video activity</FormMessage>
</Flex>
<Form.Control asChild>
<Input onChange={handleNameChange} type="text" required />
</Form.Control>
</FormField>
<FormField name="video-activity-file">
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
<FormLabel>Video file</FormLabel>
<FormMessage match="valueMissing">Please provide a video for your activity</FormMessage>
</Flex>
<Form.Control asChild>
<input type="file" onChange={handleVideoChange} required />
</Form.Control>
</FormField>
<br />
<button onClick={handleSubmit}>Send</button>
</div>
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
<Form.Submit asChild>
<ButtonBlack type="submit" css={{ marginTop: 10 }}>Create Activity</ButtonBlack>
</Form.Submit>
</Flex>
</FormLayout>
);
}