115 lines
3.2 KiB
TypeScript
115 lines
3.2 KiB
TypeScript
import { CommentOutlined } from "@ant-design/icons";
|
|
import { Card, Flex, Input } from "antd";
|
|
import { Constants, getImageUrl } from "core/utils/utils";
|
|
import { Link } from "react-router-dom";
|
|
import MyUpload from "shared/components/MyUpload";
|
|
import styles from "./styles.module.css";
|
|
import { LessonSettings } from "core/types/lesson";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export default function MyLessonPreviewCard({
|
|
mode = "view",
|
|
lessonId,
|
|
loading = false,
|
|
lessonSettings,
|
|
onEditTitle,
|
|
onThumbnailChanged,
|
|
}: {
|
|
mode: "view" | "editable";
|
|
lessonId: string;
|
|
loading?: boolean;
|
|
lessonSettings: LessonSettings;
|
|
onEditTitle?: (newTitle: string) => void;
|
|
onThumbnailChanged?: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
|
|
const LinkWrapper = ({ children }: { children: React.ReactNode }) => {
|
|
if (mode === "editable") return <>{children}</>;
|
|
|
|
return (
|
|
<Link
|
|
to={Constants.ROUTE_PATHS.LESSIONS.PAGE.replace(":lessonId", lessonId)}
|
|
>
|
|
{children}
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
const UploadWrapper = ({ children }: { children: React.ReactNode }) => {
|
|
if (mode === "view") return <>{children}</>;
|
|
|
|
return (
|
|
<MyUpload
|
|
action={`/lessons/${lessonId}/preview/thumbnail`}
|
|
onChange={(info) => {
|
|
if (info.file.status === "done") {
|
|
onThumbnailChanged?.();
|
|
}
|
|
}}
|
|
imgCropProps={{
|
|
aspect: 5 / 4,
|
|
children: <></>,
|
|
}}
|
|
>
|
|
{children}
|
|
</MyUpload>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<LinkWrapper>
|
|
<Card loading={loading}>
|
|
<div className={styles.card}>
|
|
<UploadWrapper>
|
|
<img
|
|
src={
|
|
lessonSettings.ThumbnailUrl === ""
|
|
? `${Constants.STATIC_CONTENT_ADDRESS}/demo/lesson_thumbnail.webp`
|
|
: getImageUrl(lessonSettings.ThumbnailUrl)
|
|
}
|
|
alt="lesson thumbnail"
|
|
className={styles.img}
|
|
/>
|
|
</UploadWrapper>
|
|
|
|
<Flex vertical justify="center" style={{ width: "100%" }}>
|
|
{mode === "view" ? (
|
|
<div>
|
|
<div className={styles.title}>{lessonSettings.Title}</div>
|
|
<CommentOutlined /> {lessonSettings.QuestionsCount}{" "}
|
|
{t("lessonPage.questions")}
|
|
</div>
|
|
) : (
|
|
<Input
|
|
variant="outlined"
|
|
defaultValue={lessonSettings.Title}
|
|
onChange={(event) => onEditTitle?.(event.target.value)}
|
|
placeholder={t("lessonPageEditor.titlePlaceholder")}
|
|
style={{ width: "100%", fontSize: 24, fontWeight: "bold" }}
|
|
/>
|
|
)}
|
|
</Flex>
|
|
</div>
|
|
</Card>
|
|
</LinkWrapper>
|
|
);
|
|
}
|
|
|
|
/*
|
|
<Typography.Title
|
|
level={2}
|
|
editable={{
|
|
triggerType: "text" as any,
|
|
tooltip: "click to edit text",
|
|
onChange: (event) => onEditTitle?.(event),
|
|
}}
|
|
style={{
|
|
width: "100%",
|
|
margin: 0,
|
|
}}
|
|
>
|
|
{lessonSettings.Title}
|
|
</Typography.Title>
|
|
*/
|