commit 5401431c5385a1b340bce3d534077ee15e809371
parent 381a21a9f2596f32ba51e89415b71f86e4484f6d
Author: MTRNord <mtrnord1@gmail.com>
Date: Wed, 4 Jan 2023 01:13:09 +0100
Prepare Profile Page
Diffstat:
4 files changed, 58 insertions(+), 21 deletions(-)
diff --git a/src/app.tsx b/src/app.tsx
@@ -13,6 +13,8 @@ import { Route, Routes } from 'react-router-dom';
const Join = lazy(() => import("./pages/Join"));
const Post = lazy(() => import("./pages/Post"));
+const Profile = lazy(() => import("./pages/Profile"));
+
export function App() {
const [client, setClient] = useState<MatrixClient | undefined>(undefined);
@@ -87,19 +89,35 @@ export function App() {
<Join />
</Suspense>
} />
- <Route path="/post/:postId" element={<Suspense fallback={
- <div className="flex flex-col">
- <header>
- <Header />
- </header>
- <main className="m-12 mt-6 flex items-center justify-center">
- <p className="text-lg text-data font-bold">Loading...</p>
- </main>
- </div>
- }>
- <Post />
- </Suspense>} />
+ <Route path="/post/:postId" element={
+ <Suspense fallback={
+ <div className="flex flex-col">
+ <header>
+ <Header />
+ </header>
+ <main className="m-12 mt-6 flex items-center justify-center">
+ <p className="text-lg text-data font-bold">Loading...</p>
+ </main>
+ </div>
+ }>
+ <Post />
+ </Suspense>
+ } />
+ <Route path="/profile/:userId" element={
+ <Suspense fallback={
+ <div className="flex flex-col">
+ <header>
+ <Header />
+ </header>
+ <main className="m-12 mt-6 flex items-center justify-center">
+ <p className="text-lg text-data font-bold">Loading...</p>
+ </main>
+ </div>
+ }>
+ <Profile />
+ </Suspense>
+ } />
</Routes>
- </Client.Provider>
+ </Client.Provider >
);
}
\ No newline at end of file
diff --git a/src/components/post.tsx b/src/components/post.tsx
@@ -19,10 +19,10 @@ export function Post({ user, post }: Props) {
<SuspenseImage className="rounded-3xl shadow object-cover transform transition-transform ease-in-out duration-300 hover:scale-105" src={post.content.file.url} />
</Link>
<div className="flex items-center justify-between py-4">
- <a className="flex items-center" href="#">
+ <Link className="flex items-center" to={`/profile/${user.mxid}`}>
<img className="w-11 h-11 rounded-full mr-4 border-2 border-[#AAB3CF] hover:border-indigo-300 ease-in-out duration-150" src={user.avatar_url} />
<p className="text-data text-lg font-medium">{user.display_name}</p>
- </a>
+ </Link>
<div className="flex text-data text-lg items-center">
<a className="mr-4 flex items-center" href="#">
<span className="mr-2 hover:fill-red-600 fill-[#AAB3CF] ease-in-out duration-150">
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -24,22 +24,22 @@ export function Home() {
<Plock gap={"24px"} breakpoints={BREAKPOINTS}>
{/*
// @ts-ignore */}
- <Post user={new UserData("", "Person A", "https://images.unsplash.com/photo-1519699047748-de8e457a634e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3NzYyNA&ixlib=rb-4.0.3&q=80&w=922")} post={new PostData("a", { file: { url: "https://images.unsplash.com/photo-1648773009733-1eab564f3330?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3Nzk0MA&ixlib=rb-4.0.3&q=80&w=614" } })} />
+ <Post user={new UserData("a", "Person A", "https://images.unsplash.com/photo-1519699047748-de8e457a634e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3NzYyNA&ixlib=rb-4.0.3&q=80&w=922")} post={new PostData("a", { file: { url: "https://images.unsplash.com/photo-1648773009733-1eab564f3330?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3Nzk0MA&ixlib=rb-4.0.3&q=80&w=614" } })} />
{/*
// @ts-ignore */}
- <Post user={new UserData("", "Person B", "https://images.unsplash.com/photo-1485893086445-ed75865251e0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3Nzc2Ng&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("b", { file: { url: "https://images.unsplash.com/photo-1648775933902-f633de370964?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODE1OQ&ixlib=rb-4.0.3&q=80&w=1383" } })} />
+ <Post user={new UserData("b", "Person B", "https://images.unsplash.com/photo-1485893086445-ed75865251e0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3Nzc2Ng&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("b", { file: { url: "https://images.unsplash.com/photo-1648775933902-f633de370964?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODE1OQ&ixlib=rb-4.0.3&q=80&w=1383" } })} />
{/*
// @ts-ignore */}
- <Post user={new UserData("", "Person C", "https://images.unsplash.com/photo-1584997159889-8bb96d0a2217?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODAxNw&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("c", { file: { url: "https://images.unsplash.com/photo-1648793633175-f3635585014b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODIwNA&ixlib=rb-4.0.3&q=80&w=614" } })} />
+ <Post user={new UserData("c", "Person C", "https://images.unsplash.com/photo-1584997159889-8bb96d0a2217?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODAxNw&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("c", { file: { url: "https://images.unsplash.com/photo-1648793633175-f3635585014b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODIwNA&ixlib=rb-4.0.3&q=80&w=614" } })} />
{/*
// @ts-ignore */}
- <Post user={new UserData("", "Person D", "https://images.unsplash.com/photo-1543123820-ac4a5f77da38?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODA0Ng&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("d", { file: { url: "https://images.unsplash.com/photo-1648775170273-dcbe48fb12a0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODI1Ng&ixlib=rb-4.0.3&q=80&w=1229" } })} />
+ <Post user={new UserData("d", "Person D", "https://images.unsplash.com/photo-1543123820-ac4a5f77da38?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODA0Ng&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("d", { file: { url: "https://images.unsplash.com/photo-1648775170273-dcbe48fb12a0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODI1Ng&ixlib=rb-4.0.3&q=80&w=1229" } })} />
{/*
// @ts-ignore */}
- <Post user={new UserData("", "Person E", "https://images.unsplash.com/photo-1595687825617-10c4d36566e7?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODA3Mw&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("e", { file: { url: "https://images.unsplash.com/photo-1648769244858-6e20b5999a6b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODI5Nw&ixlib=rb-4.0.3&q=80&w=651" } })} />
+ <Post user={new UserData("e", "Person E", "https://images.unsplash.com/photo-1595687825617-10c4d36566e7?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODA3Mw&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("e", { file: { url: "https://images.unsplash.com/photo-1648769244858-6e20b5999a6b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODI5Nw&ixlib=rb-4.0.3&q=80&w=651" } })} />
{/*
// @ts-ignore */}
- <Post user={new UserData("", "Person E", "https://images.unsplash.com/photo-1609010586352-ce4e725aa565?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODA5Mg&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("f", { file: { url: "https://images.unsplash.com/photo-1648750690732-f6eb85984ff8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=921&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODM1NQ&ixlib=rb-4.0.3&q=80&w=614" } })} />
+ <Post user={new UserData("f", "Person E", "https://images.unsplash.com/photo-1609010586352-ce4e725aa565?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODA5Mg&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("f", { file: { url: "https://images.unsplash.com/photo-1648750690732-f6eb85984ff8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=921&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODM1NQ&ixlib=rb-4.0.3&q=80&w=614" } })} />
</Plock>
</div>
</main>
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import { Header } from "../components/header";
+
+export default function Profile() {
+ let { userId } = useParams();
+ return (
+ <div className="flex flex-col">
+ <header>
+ <Header />
+ </header>
+
+ <main className="m-12 mt-6">
+
+ </main>
+ </div>
+ );
+}
+\ No newline at end of file
