...

3 files changed, 86 insertions, 0 deletions

diff --git a/FrontEnd/src/views/user/UserCard.tsx b/FrontEnd/src/views/user/UserCard.tsx
new file mode 100644
index 00000000..e7e4252e
--- /dev/null
+++ b/FrontEnd/src/views/user/UserCard.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+
+import TimelinePageCardTemplate from "../timeline-common/TimelinePageCardTemplate";
+import { TimelinePageCardProps } from "../timeline-common/TimelinePageTemplate";
+import UserAvatar from "../common/user/UserAvatar";
+
+const UserCard: React.FC<TimelinePageCardProps> = (props) => {
+  const { timeline } = props;
+
+  const [dialog, setDialog] = React.useState<"member" | "property" | null>(
+    null
+  );
+
+  return (
+    <>
+      <TimelinePageCardTemplate
+        infoArea={
+          <>
+            <h3 className="tl-color-primary d-inline-block align-middle">
+              {timeline.title}
+              <small className="ms-3 text-secondary">{timeline.name}</small>
+            </h3>
+            <div className="align-middle">
+              <UserAvatar
+                username={timeline.owner.username}
+                className="avatar small rounded-circle me-3"
+              />
+              {timeline.owner.nickname}
+            </div>
+          </>
+        }
+        manageItems={
+          timeline.manageable
+            ? [
+                {
+                  type: "button",
+                  text: "timeline.manageItem.property",
+                  onClick: () => setDialog("property"),
+                },
+              ]
+            : undefined
+        }
+        dialog={dialog}
+        setDialog={setDialog}
+        {...props}
+      />
+    </>
+  );
+};
+
+export default UserCard;
diff --git a/FrontEnd/src/views/user/index.tsx b/FrontEnd/src/views/user/index.tsx
new file mode 100644
index 00000000..57454d0d
--- /dev/null
+++ b/FrontEnd/src/views/user/index.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { useParams } from "react-router";
+
+import TimelinePageTemplate from "../timeline-common/TimelinePageTemplate";
+import UserCard from "./UserCard";
+
+const UserPage: React.FC = () => {
+  const { username } = useParams<{ username: string }>();
+
+  const [reloadKey, setReloadKey] = React.useState<number>(0);
+
+  let dialogElement: React.ReactElement | undefined;
+
+  return (
+    <>
+      <TimelinePageTemplate
+        timelineName={`@${username}`}
+        notFoundI18nKey="timeline.userNotExist"
+        reloadKey={reloadKey}
+        onReload={() => setReloadKey(reloadKey + 1)}
+        CardComponent={UserCard}
+      />
+      {dialogElement}
+    </>
+  );
+};
+
+export default UserPage;
diff --git a/FrontEnd/src/views/user/user.sass b/FrontEnd/src/views/user/user.sass
new file mode 100644
index 00000000..63a28e05
--- /dev/null
+++ b/FrontEnd/src/views/user/user.sass
@@ -0,0 +1,7 @@
+.change-avatar-cropper-row

+  max-height: 400px

+

+.change-avatar-img

+  min-width: 50%

+  max-width: 100%

+  max-height: 400px