From ac769e656b122ff569c3f1534701b71e00fed586 Mon Sep 17 00:00:00 2001 From: crupest Date: Tue, 27 Oct 2020 19:21:35 +0800 Subject: Split front and back end. --- FrontEnd/src/app/views/user/UserInfoCard.tsx | 80 ++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 FrontEnd/src/app/views/user/UserInfoCard.tsx (limited to 'FrontEnd/src/app/views/user/UserInfoCard.tsx') diff --git a/FrontEnd/src/app/views/user/UserInfoCard.tsx b/FrontEnd/src/app/views/user/UserInfoCard.tsx new file mode 100644 index 00000000..888fb18a --- /dev/null +++ b/FrontEnd/src/app/views/user/UserInfoCard.tsx @@ -0,0 +1,80 @@ +import React from "react"; +import { useTranslation } from "react-i18next"; +import { Dropdown, Button } from "react-bootstrap"; + +import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline"; +import { useAvatar } from "@/services/user"; + +import BlobImage from "../common/BlobImage"; +import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI"; +import InfoCardTemplate from "../timeline-common/InfoCardTemplate"; + +export type PersonalTimelineManageItem = "avatar" | "nickname"; + +export type UserInfoCardProps = TimelineCardComponentProps< + PersonalTimelineManageItem +>; + +const UserInfoCard: React.FC = (props) => { + const { + timeline, + collapse, + onMember, + onManage, + syncStatus, + toggleCollapse, + } = props; + const { t } = useTranslation(); + + const avatar = useAvatar(timeline?.owner?.username); + + return ( + +
+ + {timeline.owner.nickname} + + @{timeline.owner.username} + +
+

{timeline.description}

+ + {t(timelineVisibilityTooltipTranslationMap[timeline.visibility])} + +
+ {onManage != null ? ( + + + {t("timeline.manage")} + + + onManage("nickname")}> + {t("timeline.manageItem.nickname")} + + onManage("avatar")}> + {t("timeline.manageItem.avatar")} + + onManage("property")}> + {t("timeline.manageItem.property")} + + + {t("timeline.manageItem.member")} + + + + ) : ( + + )} +
+
+ ); +}; + +export default UserInfoCard; -- cgit v1.2.3