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: refactor the entire learnhouse project

Browse source
This commit is contained in:
swve 2023-10-13 20:03:27 +02:00
parent f556e41dda
commit 4c215e91d5
247 changed files with 7716 additions and 1013 deletions
Download patch file Download diff file Expand all files Collapse all files

113
apps/web/components/Objects/Modals/Activities/Create/NewActivity.tsx Normal file
View file

@ -0,0 +1,113 @@
import React, { useState } from "react";
import { ArrowLeftIcon, Cross1Icon } from "@radix-ui/react-icons";
import DynamicPageActivityImage from "public/activities_types/dynamic-page-activity.png";
import VideoPageActivityImage from "public//activities_types/video-page-activity.png";
import DocumentPdfPageActivityImage from "public//activities_types/documentpdf-page-activity.png";
import { styled, keyframes } from '@stitches/react';
import DynamicCanvaModal from "./NewActivityModal/DynamicCanva";
import VideoModal from "./NewActivityModal/Video";
import Image from "next/image";
import DocumentPdfModal from "./NewActivityModal/DocumentPdf";
function NewActivityModal({ closeModal, submitActivity, submitFileActivity, submitExternalVideo, chapterId }: any) {
const [selectedView, setSelectedView] = useState("home");
return (
<div>
{selectedView === "home" && (
<ActivityChooserWrapper>
<ActivityOption onClick={() => { setSelectedView("dynamic") }}>
<ActivityTypeImage>
<Image alt="Dynamic Page" src={DynamicPageActivityImage}></Image>
</ActivityTypeImage>
<ActivityTypeTitle>Dynamic Page</ActivityTypeTitle>
</ActivityOption>
<ActivityOption onClick={() => { setSelectedView("video") }}>
<ActivityTypeImage>
<Image alt="Video Page" src={VideoPageActivityImage}></Image>
</ActivityTypeImage>
<ActivityTypeTitle>Video Page</ActivityTypeTitle>
</ActivityOption>
<ActivityOption onClick={() => { setSelectedView("documentpdf") }}>
<ActivityTypeImage>
<Image alt="Document PDF Page" src={DocumentPdfPageActivityImage}></Image>
</ActivityTypeImage>
<ActivityTypeTitle>PDF Document Page</ActivityTypeTitle>
</ActivityOption>
</ActivityChooserWrapper>
)}
{selectedView === "dynamic" && (
<DynamicCanvaModal submitActivity={submitActivity} chapterId={chapterId} />
)}
{selectedView === "video" && (
<VideoModal submitFileActivity={submitFileActivity} submitExternalVideo={submitExternalVideo}
chapterId={chapterId} />
)}
{selectedView === "documentpdf" && (
<DocumentPdfModal submitFileActivity={submitFileActivity} chapterId={chapterId} />
)}
</div>
);
}
const ActivityChooserWrapper = styled("div", {
display: "flex",
flexDirection: "row",
justifyContent: "start",
marginTop: 10,
});
const ActivityOption = styled("div", {
width: "180px",
textAlign: "center",
borderRadius: 10,
background: "#F6F6F6",
border: "4px solid #F5F5F5",
margin: "auto",
// hover
"&:hover": {
cursor: "pointer",
background: "#ededed",
border: "4px solid #ededed",
transition: "background 0.2s ease-in-out, border 0.2s ease-in-out",
},
});
const ActivityTypeImage = styled("div", {
height: 80,
borderRadius: 8,
margin: 2,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "end",
textAlign: "center",
background: "#ffffff",
// hover
"&:hover": {
cursor: "pointer",
},
});
const ActivityTypeTitle = styled("div", {
display: "flex",
fontSize: 12,
height: "20px",
fontWeight: 500,
color: "rgba(0, 0, 0, 0.38);",
// center text vertically
alignItems: "center",
justifyContent: "center",
textAlign: "center",
});
export default NewActivityModal;