commit 1addb35e5b08140df201fd9666317a74a3c4547f
parent 4d5b0e8d987257249d74c3e71af929c15b0db299
Author: MTRNord <mtrnord1@gmail.com>
Date: Fri, 1 Apr 2022 20:36:27 +0200
Implement initial part of the new design
Diffstat:
13 files changed, 314 insertions(+), 17 deletions(-)
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
- <link rel="icon" type="image/svg+xml" href="/Logo.svg" />
+ <link rel="icon" type="image/svg+xml" href="/Logo_colored.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Matrix Art</title>
<script>
diff --git a/package-lock.json b/package-lock.json
@@ -14,7 +14,8 @@
"matrix-events-sdk": "^0.0.1-beta.7",
"matrix-js-sdk": "^16.0.1",
"preact": "^10.5.15",
- "preact-router": "^4.0.1"
+ "preact-router": "^4.0.1",
+ "react-plock": "^1.2.0"
},
"devDependencies": {
"@preact/preset-vite": "^2.1.5",
@@ -3519,6 +3520,11 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/react-plock": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/react-plock/-/react-plock-1.2.0.tgz",
+ "integrity": "sha512-bBlyAj8LM/1DSSl98yQ+7QN2xjs/JZ8QOlvF93Jbs/Yys6tMzSFf+oLE/R/iReL9N0acgAI/0MFdmjC0Vke1Nw=="
+ },
"node_modules/read-pkg": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -6736,6 +6742,11 @@
"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
"dev": true
},
+ "react-plock": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/react-plock/-/react-plock-1.2.0.tgz",
+ "integrity": "sha512-bBlyAj8LM/1DSSl98yQ+7QN2xjs/JZ8QOlvF93Jbs/Yys6tMzSFf+oLE/R/iReL9N0acgAI/0MFdmjC0Vke1Nw=="
+ },
"read-pkg": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
"matrix-events-sdk": "^0.0.1-beta.7",
"matrix-js-sdk": "^16.0.1",
"preact": "^10.5.15",
- "preact-router": "^4.0.1"
+ "preact-router": "^4.0.1",
+ "react-plock": "^1.2.0"
},
"devDependencies": {
"@preact/preset-vite": "^2.1.5",
diff --git a/public/Logo_colored.svg b/public/Logo_colored.svg
@@ -0,0 +1,93 @@
+<svg width="400" height="87" viewBox="20 10 400 87" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g filter="url(#filter0_ddd_7_98)">
+ <path
+ d="M125.562 77.1249C121 86.2499 114.516 90.8126 106.109 90.8126C97.7656 90.8126 91.7969 85.1876 88.2032 73.9376C85.8282 66.5 84.6406 57.4376 84.6406 46.75C84.6406 42.7813 84.7969 38.5781 85.1094 34.1406C78.9844 46.1094 74.2188 57.9376 70.8125 69.625H52.8594L52.9063 34.0469C46.8438 46.0469 42.1875 57.9062 38.9375 69.625H20C32.5938 50.9062 42.5156 31.0312 49.7656 10H68.5156C66.7032 21.3125 65.75 33.1562 65.6563 45.5312C71.6563 33.1875 77.125 21.3438 82.0625 10H103.391C100.047 18.5625 98.375 27.6876 98.375 37.375C98.375 38.5938 98.4219 40.1093 98.5156 41.9218C98.8282 48.2031 99.2813 52.9219 99.875 56.0782C100.75 60.7657 102.219 65.2343 104.281 69.4843C107.687 76.4843 111.719 79.9844 116.375 79.9844C121.125 79.9844 124.187 79.0312 125.562 77.1249Z"
+ fill="url(#paint0_linear_7_98)" />
+ <path
+ d="M152.046 28.5625C146.765 42.2499 142.593 55.9376 139.531 69.625H123.828L124.531 67.3282C121.5 69.0469 118.391 69.9062 115.203 69.9062C110.984 69.9062 107.687 68.4532 105.312 65.5469C103.094 62.8594 101.984 59.3593 101.984 55.0468C101.984 48.4843 104.141 42.4688 108.453 37C113.078 31.1563 118.562 28.2344 124.906 28.2344C129.562 28.2344 132.953 29.7187 135.078 32.6875L136.343 28.5625H152.046ZM130.531 43.6093C130.531 40.3281 128.922 38.6875 125.703 38.6875C123.422 38.6875 121.406 39.6562 119.656 41.5938C117.906 43.5312 117.031 45.6562 117.031 47.9688C117.031 51.4062 118.734 53.125 122.14 53.125C124.546 53.125 126.578 52.125 128.234 50.125C129.765 48.25 130.531 46.0781 130.531 43.6093Z"
+ fill="url(#paint1_linear_7_98)" />
+ <path
+ d="M187.531 28.2344L183.64 41.1719C180.328 41.0469 177.125 40.9376 174.031 40.8438C171.218 50.125 168.937 59.7188 167.187 69.625H149.984C152.828 62.3438 156 52.7344 159.5 40.7969C156.218 40.8907 153.046 41.0157 149.984 41.1719L153.922 28.2344C156.828 28.3907 159.875 28.4999 163.062 28.5625C164.437 23.5625 165.875 18.2188 167.375 12.5312H184.718C182.312 17.8125 180.125 23.1562 178.156 28.5625C181.156 28.4687 184.281 28.3594 187.531 28.2344Z"
+ fill="url(#paint2_linear_7_98)" />
+ <path
+ d="M226.625 39.0156C224.812 38.1093 221.625 37.6562 217.062 37.6562C213.468 37.6562 210.453 38.6876 208.015 40.75C205.328 43.0313 201.64 52.4062 196.953 68.875H196.906L196.672 69.625H180.968L193.437 28.5625H200.375C202.281 27.7499 204.515 27.3438 207.078 27.3438C212.296 27.3438 218.812 31.2343 226.625 39.0156Z"
+ fill="url(#paint3_linear_7_98)" />
+ <path
+ d="M251.796 19.375C251.796 21.5312 250.515 23.2656 247.953 24.5781C245.89 25.6406 243.656 26.1719 241.25 26.1719C238.812 26.1719 236.531 25.6406 234.406 24.5781C231.843 23.2968 230.562 21.5468 230.562 19.3281C230.562 17.1094 231.937 15.3594 234.687 14.0781C236.875 13.0469 239.218 12.5312 241.718 12.5312C244.187 12.5312 246.375 13.0469 248.281 14.0781C250.625 15.3594 251.796 17.125 251.796 19.375ZM246.359 28.5625L233.89 69.625H218.187L230.656 28.5625H246.359Z"
+ fill="url(#paint4_linear_7_98)" />
+ <path
+ d="M291.172 28.5625L270.125 49.6562L278.656 69.625H264.546L260.187 59.5468L250.109 69.625H234.453L255.546 48.5782L246.968 28.5625H261.125L265.437 38.6875L275.562 28.5625H291.172Z"
+ fill="url(#paint5_linear_7_98)" />
+ <path
+ d="M365.328 77.1249C360.765 86.2499 354.296 90.8126 345.922 90.8126C338.703 90.8126 333.25 86.9688 329.562 79.2812C326.968 73.8749 325.359 66.8907 324.734 58.3282H314.281C312.937 62.1407 311.703 65.9063 310.578 69.625H292.062C303.843 48.4375 313.781 28.5625 321.875 10H343.203C339.828 18.5938 338.14 27.7188 338.14 37.375C338.14 38.5938 338.187 40.1093 338.281 41.9218C338.593 48.2656 339.046 52.9844 339.64 56.0782C340.515 60.7344 341.984 65.2031 344.046 69.4843C347.422 76.4843 351.453 79.9844 356.14 79.9844C360.89 79.9844 363.953 79.0312 365.328 77.1249ZM324.968 33.9531C322.75 38.2343 320.718 42.5156 318.875 46.7968H324.453C324.484 42.7968 324.656 38.5156 324.968 33.9531Z"
+ fill="url(#paint6_linear_7_98)" />
+ <path
+ d="M386.187 39.0156C384.375 38.1093 381.187 37.6562 376.625 37.6562C373.031 37.6562 370.015 38.6876 367.578 40.75C364.89 43.0313 361.203 52.4062 356.515 68.875H356.468L356.234 69.625H340.531L353 28.5625H359.937C361.843 27.7499 364.078 27.3438 366.64 27.3438C371.859 27.3438 378.375 31.2343 386.187 39.0156Z"
+ fill="url(#paint7_linear_7_98)" />
+ <path
+ d="M419.75 28.2344L415.859 41.1719C412.546 41.0469 409.343 40.9376 406.25 40.8438C403.437 50.125 401.156 59.7188 399.406 69.625H382.203C385.046 62.3438 388.218 52.7344 391.718 40.7969C388.437 40.8907 385.265 41.0157 382.203 41.1719L386.14 28.2344C389.046 28.3907 392.093 28.4999 395.281 28.5625C396.656 23.5625 398.093 18.2188 399.593 12.5312H416.937C414.531 17.8125 412.343 23.1562 410.375 28.5625C413.375 28.4687 416.5 28.3594 419.75 28.2344Z"
+ fill="url(#paint8_linear_7_98)" />
+ </g>
+ <defs>
+ <filter id="filter0_ddd_7_98" x="0" y="0" width="439.75" height="120.813" filterUnits="userSpaceOnUse"
+ color-interpolation-filters="sRGB">
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+ result="hardAlpha" />
+ <feOffset dy="2" />
+ <feGaussianBlur stdDeviation="3" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0" />
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_98" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+ result="hardAlpha" />
+ <feOffset dy="10" />
+ <feGaussianBlur stdDeviation="10" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0" />
+ <feBlend mode="normal" in2="effect1_dropShadow_7_98" result="effect2_dropShadow_7_98" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+ result="hardAlpha" />
+ <feOffset dy="4" />
+ <feGaussianBlur stdDeviation="2" />
+ <feComposite in2="hardAlpha" operator="out" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+ <feBlend mode="normal" in2="effect2_dropShadow_7_98" result="effect3_dropShadow_7_98" />
+ <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_7_98" result="shape" />
+ </filter>
+ <linearGradient id="paint0_linear_7_98" x1="-213.5" y1="50" x2="629.5" y2="50" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#751796" />
+ <stop offset="1" stop-color="#FE7223" />
+ </linearGradient>
+ <linearGradient id="paint1_linear_7_98" x1="-213.5" y1="50" x2="629.5" y2="50" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#751796" />
+ <stop offset="1" stop-color="#FE7223" />
+ </linearGradient>
+ <linearGradient id="paint2_linear_7_98" x1="-213.5" y1="50" x2="629.5" y2="50" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#751796" />
+ <stop offset="1" stop-color="#FE7223" />
+ </linearGradient>
+ <linearGradient id="paint3_linear_7_98" x1="-213.5" y1="50" x2="629.5" y2="50" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#751796" />
+ <stop offset="1" stop-color="#FE7223" />
+ </linearGradient>
+ <linearGradient id="paint4_linear_7_98" x1="-213.5" y1="50" x2="629.5" y2="50" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#751796" />
+ <stop offset="1" stop-color="#FE7223" />
+ </linearGradient>
+ <linearGradient id="paint5_linear_7_98" x1="-213.5" y1="50" x2="629.5" y2="50" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#751796" />
+ <stop offset="1" stop-color="#FE7223" />
+ </linearGradient>
+ <linearGradient id="paint6_linear_7_98" x1="-213.5" y1="50" x2="629.5" y2="50" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#751796" />
+ <stop offset="1" stop-color="#FE7223" />
+ </linearGradient>
+ <linearGradient id="paint7_linear_7_98" x1="-213.5" y1="50" x2="629.5" y2="50" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#751796" />
+ <stop offset="1" stop-color="#FE7223" />
+ </linearGradient>
+ <linearGradient id="paint8_linear_7_98" x1="-213.5" y1="50" x2="629.5" y2="50" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#751796" />
+ <stop offset="1" stop-color="#FE7223" />
+ </linearGradient>
+ </defs>
+</svg>
+\ No newline at end of file
diff --git a/src/Home.tsx b/src/Home.tsx
@@ -1,11 +0,0 @@
-import { PureComponent } from "preact/compat";
-
-export class Home extends PureComponent {
- render() {
- return (
- <div>
- <h1>Hello World</h1>
- </div>
- );
- }
-}
-\ No newline at end of file
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,6 +1,6 @@
import Router from 'preact-router';
import { PureComponent } from 'preact/compat';
-import { Home } from './Home';
+import { Home } from './pages/Home';
import { MatrixClient } from "./matrix/client";
export class App extends PureComponent {
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -0,0 +1,23 @@
+import { PureComponent } from "preact/compat";
+
+export class Header extends PureComponent {
+ render() {
+ return (
+ <div class="m-12 flex flex-col lg:flex-row items-center justify-between">
+ <img alt="Matrix Art" src="Logo_colored.svg" />
+ <div class="flex items-center mt-8 lg:mt-0 flex-col sm:flex-row">
+ <div class="flex items-center justify-between w-80 max-w-80 mx-6">
+ <div class="absolute ml-4">
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#AAB3CF">
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
+ </svg>
+ </div>
+ <input class="search-bg shadow rounded-2xl border-0 py-3 px-4 pl-10 text-data" placeholder="Search"></input>
+ </div>
+ <button class="text-white font-bold text-1xl logo-bg rounded-2xl py-3 px-12 shadow mt-4 sm:mt-0">Join</button>
+ </div>
+ </div>
+ );
+ }
+}
+\ No newline at end of file
diff --git a/src/components/post.tsx b/src/components/post.tsx
@@ -0,0 +1,47 @@
+import { PureComponent } from "preact/compat";
+import { PostData } from "../data/post";
+import { UserData } from "../data/user";
+
+type Props = {
+ user: UserData;
+ post: PostData;
+};
+
+export class Post extends PureComponent<Props> {
+ constructor(props: Props) {
+ super(props);
+ }
+ render({ user, post }: Props) {
+ return (
+ <div class="flex flex-col">
+ <a href="#"><img class="rounded-3xl shadow object-cover" src={post.content.file.url} /></a>
+ <div class="flex items-center justify-between py-4">
+ <a class="flex items-center" href="#">
+ <img class="w-11 h-11 rounded-full mr-4 border-2 border-[#AAB3CF]" src={user.avatar_url} />
+ <p class="text-data shadow text-xl font-medium">{user.display_name}</p>
+ </a>
+ <div class="flex text-data items-center">
+ <a class="mr-4 flex" href="#">
+ <span class="mr-2">
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#AAB3CF">
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" />
+ </svg>
+ </span>
+ <span>5</span>
+ </a>
+ <a class="flex" href="#">
+ <span class="mr-2">
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#AAB3CF">
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" />
+ </svg>
+ </span>
+ <span>11</span>
+ </a>
+ </div>
+ </div>
+ </div>
+ );
+ }
+}
+\ No newline at end of file
diff --git a/src/data/post.ts b/src/data/post.ts
@@ -0,0 +1,10 @@
+import { ImageEvent } from "../matrix/events/ImageEvent";
+
+export class PostData {
+ public readonly event_id: string;
+ public readonly content: ImageEvent;
+ constructor(event_id: string, content: ImageEvent) {
+ this.event_id = event_id;
+ this.content = content;
+ }
+}
+\ No newline at end of file
diff --git a/src/data/user.ts b/src/data/user.ts
@@ -0,0 +1,11 @@
+export class UserData {
+ public readonly mxid: string;
+ public readonly display_name: string;
+ public readonly avatar_url: string;
+
+ constructor(mxid: string, display_name: string, avatar_url: string) {
+ this.mxid = mxid;
+ this.display_name = display_name;
+ this.avatar_url = avatar_url;
+ }
+}
+\ No newline at end of file
diff --git a/src/index.css b/src/index.css
@@ -86,3 +86,47 @@
url(/fonts/Inter-VariableFont_slnt,wght.woff2) format("woff2-variations");
}
}
+
+
+html, body, #app {
+ margin: 0;
+ @apply h-full;
+}
+
+body {
+ background-color:#424555;
+}
+
+/* Masrony layout (GRID)
+From https://stackoverflow.com/questions/66914169/can-i-create-a-masonry-layout-using-tailwind-css-utility-classes
+*/
+@layer utilities {
+ @variants responsive {
+ .masonry-3-col {
+ column-count: 3;
+ column-gap: 1em;
+ }
+ .masonry-2-col {
+ column-count: 2;
+ column-gap: 1em;
+ }
+ .break-inside {
+ break-inside: avoid;
+ }
+ }
+}
+
+/*Logo gradient*/
+.logo-bg {
+ background: linear-gradient(90deg, #751796 -58.41%, #FE7223 152.47%);
+}
+
+/*Search bg gradient*/
+.search-bg {
+ background: linear-gradient(90deg, rgba(196, 196, 196, 0.11) -33.43%, rgba(196, 196, 196, 0.07) 184.14%);
+}
+
+/*data text*/
+.text-data {
+ color: #AAB3CF;
+}
+\ No newline at end of file
diff --git a/src/matrix/events/ImageEvent.ts b/src/matrix/events/ImageEvent.ts
@@ -62,7 +62,7 @@ export type M_IMAGE_EVENT_CONTENT = M_MESSAGE_EVENT_CONTENT
| MATRIX_ART_NSFW_EVENT
| MATRIX_ART_LICENSE_EVENT;
-class ImageEvent extends ExtensibleEvent<M_IMAGE_EVENT_CONTENT> {
+export class ImageEvent extends ExtensibleEvent<M_IMAGE_EVENT_CONTENT> {
public readonly image!: ImageFields;
public readonly text!: string;
public readonly thumbnails?: ThumbnailFileEvent[];
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -0,0 +1,62 @@
+import { PureComponent } from "preact/compat";
+import { Header } from "../components/header";
+import { Post } from "../components/post";
+// @ts-ignore no types
+import { Plock } from "react-plock";
+import { UserData } from "../data/user";
+import { PostData } from "../data/post";
+
+type State = {
+ columns: number;
+};
+
+export class Home extends PureComponent<any, State> {
+ constructor() {
+ super();
+ this.state = {
+ columns: this.settingColumns()
+ };
+ }
+
+ // TODO: Factor in the amount of images
+ // If we have less than the result then only use the numver of images as columns
+ private settingColumns(): number {
+ if (window.innerWidth >= 1400) {
+ return 4;
+ } else if (window.innerWidth >= 800) {
+ return 3;
+ } else if (window.innerWidth >= 500) {
+ return 2;
+ } else {
+ return 1;
+ }
+ }
+
+ componentDidMount() {
+ window.addEventListener('resize', () => this.setState({ columns: this.settingColumns() }));
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('resize', () => this.setState({ columns: this.settingColumns() }));
+ }
+
+ render() {
+ return (
+ <div class="flex flex-col">
+ <header>
+ <Header />
+ </header>
+ <main class="m-12 mt-6">
+ <h1 class="text-3xl font-bold mb-4 text-white">Explore</h1>
+ <div class="flex justify-center">
+ <Plock gap={24} nColumns={this.state.columns}>
+ <Post user={new UserData("", "Person A", "https://unsplash.com/photos/_cvwXhGqG-o/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8OHx8ZmFjZXxlbnwwfDJ8fHwxNjQ4Nzc5NzYx&force=true")} post={new PostData("", { file: { url: "https://unsplash.com/photos/UWmrTAQ75iA/download?ixid=MnwxMjA3fDB8MXxhbGx8Mnx8fHx8fDJ8fDE2NDg4MzI0Njg&force=true" } })} />
+ <Post user={new UserData("", "Person B", "https://unsplash.com/photos/uJ8LNVCBjFQ/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MTN8fGZhY2V8ZW58MHwyfHx8MTY0ODc3OTc2MQ&force=true")} post={new PostData("", { file: { url: "https://unsplash.com/photos/7ptbiEPxKMQ/download?ixid=MnwxMjA3fDB8MXxhbGx8OXx8fHx8fDJ8fDE2NDg4MzI0Njg&force=true" } })} />
+ <Post user={new UserData("", "Person C", "https://unsplash.com/photos/u3pi6HhSYew/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MTd8fGZhY2V8ZW58MHwyfHx8MTY0ODc3OTc2MQ&force=true")} post={new PostData("", { file: { url: "https://unsplash.com/photos/ZiPlVmmKEYA/download?ixid=MnwxMjA3fDB8MXxhbGx8Mzl8fHx8fHwyfHwxNjQ4ODM2MDIz&force=true" } })} />
+ </Plock>
+ </div>
+ </main>
+ </div>
+ );
+ }
+}
+\ No newline at end of file
