149 lines
3.5 KiB
TypeScript
149 lines
3.5 KiB
TypeScript
import { Button, Card, Flex, Typography } from "antd";
|
|
|
|
import img from "./pexels-photo-302902.webp";
|
|
import { MyContainer } from "../../../shared/components/MyContainer";
|
|
import { CheckOutlined } from "@ant-design/icons";
|
|
import HeaderBar from "../../../core/components/Header";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
import { Constants } from "../../../core/utils/utils";
|
|
|
|
export type LessonContent = {
|
|
id: string;
|
|
position: number;
|
|
type: number;
|
|
data: string;
|
|
};
|
|
|
|
const LessonContents = [
|
|
{
|
|
id: "0",
|
|
position: 1,
|
|
type: 0,
|
|
data: "How to clean the coffee machine",
|
|
},
|
|
{
|
|
id: "1",
|
|
position: 1,
|
|
type: 2,
|
|
data: img,
|
|
},
|
|
{
|
|
id: "2",
|
|
position: 2,
|
|
type: 1,
|
|
data: "The proper cleaning of the coffee machine",
|
|
},
|
|
{
|
|
id: "3",
|
|
position: 3,
|
|
type: 1,
|
|
data: "Think a moment in silence. What makes you really happy? Are you the only one with this? Probably you could sell this knowledge to others! Think about it",
|
|
},
|
|
] as LessonContent[];
|
|
|
|
export function Converter({
|
|
mode,
|
|
lessonContent,
|
|
onEdit,
|
|
}: {
|
|
mode: "view" | "edititable";
|
|
lessonContent: LessonContent;
|
|
onEdit?: (newData: string) => void;
|
|
}) {
|
|
// const dispatch = useDispatch();
|
|
// const contents = useSelector(lessonContents);
|
|
|
|
switch (lessonContent.type) {
|
|
case 0:
|
|
return mode === "view" ? (
|
|
<div style={{ fontWeight: "bold", fontSize: 24 }}>
|
|
{lessonContent.data}
|
|
</div>
|
|
) : (
|
|
<Typography.Title
|
|
editable={{
|
|
triggerType: "text" as any,
|
|
onChange: (event) => onEdit?.(event),
|
|
}}
|
|
level={1}
|
|
style={{
|
|
margin: 0,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
{lessonContent.data}
|
|
</Typography.Title>
|
|
);
|
|
case 1:
|
|
return mode === "view" ? (
|
|
<div style={{ fontSize: 16 }}>{lessonContent.data}</div>
|
|
) : (
|
|
<Typography.Text
|
|
editable={{
|
|
triggerType: "text" as any,
|
|
onChange: (event) => onEdit?.(event),
|
|
}}
|
|
style={{
|
|
margin: 0,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
{lessonContent.data}
|
|
</Typography.Text>
|
|
);
|
|
case 2:
|
|
return (
|
|
<img src={lessonContent.data} alt="img" style={{ width: "100%" }} />
|
|
);
|
|
case 3:
|
|
return (
|
|
<div style={{ fontWeight: "700", fontSize: 20 }}>
|
|
{lessonContent.data}
|
|
</div>
|
|
);
|
|
case 4:
|
|
return <div style={{ fontSize: 14 }}>{lessonContent.data}</div>;
|
|
default:
|
|
return <div>Unknown type</div>;
|
|
}
|
|
}
|
|
|
|
export default function LessonPage() {
|
|
const location = useLocation()
|
|
const navigate = useNavigate()
|
|
|
|
return (
|
|
<>
|
|
<HeaderBar
|
|
theme="light"
|
|
backTo={Constants.ROUTE_PATHS.LESSIONS.ROOT}
|
|
onEdit={() =>
|
|
navigate(`${location.pathname}/editor`)}
|
|
/>
|
|
|
|
<MyContainer>
|
|
<Flex justify="center">
|
|
<Card
|
|
style={{
|
|
width: 800,
|
|
maxWidth: 800,
|
|
}}
|
|
>
|
|
{LessonContents.map((lessonContent) => (
|
|
<div key={lessonContent.id} style={{ paddingBottom: 6 }}>
|
|
<Converter mode="view" lessonContent={lessonContent} />
|
|
</div>
|
|
))}
|
|
|
|
<Flex justify="right">
|
|
<Button type="primary" icon={<CheckOutlined />}>
|
|
Finish lesson
|
|
</Button>
|
|
</Flex>
|
|
</Card>
|
|
</Flex>
|
|
</MyContainer>
|
|
</>
|
|
);
|
|
}
|