commit 1914f6fb79443375a93054faba37cfd329f706a2
parent a17497a6d8217b0b9858392e5f2e68db98908ac1
Author: MTRNord <mtrnord1@gmail.com>
Date: Mon, 18 Apr 2022 21:41:41 +0200
Add gallery code and preview action
Diffstat:
7 files changed, 89 insertions(+), 149 deletions(-)
diff --git a/.github/workflows/deploy-preview.yml b/.github/workflows/deploy-preview.yml
@@ -0,0 +1,48 @@
+name: Build and Deploy
+permissions: read-all
+on:
+ pull_request_target:
+ types:
+ - opened
+ - synchronize
+ - reopened
+
+jobs:
+ build-and-deploy:
+ concurrency: ci-${{ github.ref }}
+ runs-on: self-hosted
+ steps:
+ - name: Edit PR Description
+ uses: Beakyn/gha-comment-pull-request@2167a7aee24f9e61ce76a23039f322e49a990409
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ with:
+ pull-request-number: ${{ steps.readctx.outputs.prnumber }}
+ description-message: |
+ ⌛ Deploy Preview - Build in Progress
+ - name: Checkout 🛎️
+ uses: actions/checkout@v3
+
+ - name: Install and Build 🔧
+ run: |
+ npm ci
+ npm run build
+
+ - name: Deploy to gh-pages
+ uses: peaceiris/actions-gh-pages@v3
+ with:
+ deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
+ publish_dir: ./pr-${{ github.event.pull_request.number }}
+ cname: preview.art.midnightthoughts.space
+ external_repository: MTRNord/matrix-art-preview
+ - name: Edit PR Description
+ uses: Beakyn/gha-comment-pull-request@2167a7aee24f9e61ce76a23039f322e49a990409
+ env:
+ BUILD_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ with:
+ description-message: |
+ ----
+ 😎 Browse the preview: https://preview.art.midnightthoughts.space/pr-${{ github.event.pull_request.number }} !
+ 🔍 Inspect the deploy log: ${{ env.BUILD_URL }}
+ ⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/Logo_colored.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta name="description" content="Matrix-Art is an image gallery for Matrix.">
<title>Matrix Art</title>
<script>
global = globalThis // fix for "global not defined" error
diff --git a/package-lock.json b/package-lock.json
@@ -14,14 +14,15 @@
"inquirer": "^8.2.2",
"matrix-events-sdk": "^0.0.1-beta.7",
"matrix-js-sdk": "^16.0.1",
+ "photoswipe": "^5.2.2",
"preact": "^10.5.15",
"preact-router": "^4.0.1",
- "react-photoswipe-gallery": "^1.3.10",
"react-plock": "^1.2.0"
},
"devDependencies": {
"@preact/preset-vite": "^2.1.5",
"@types/events": "^3.0.0",
+ "@types/photoswipe": "^4.1.2",
"@typescript-eslint/eslint-plugin": "^5.17.0",
"@typescript-eslint/parser": "^5.17.0",
"autoprefixer": "^10.4.4",
@@ -637,6 +638,12 @@
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
"dev": true
},
+ "node_modules/@types/photoswipe": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/@types/photoswipe/-/photoswipe-4.1.2.tgz",
+ "integrity": "sha512-HA9TtCAQKToldgxRiyJ1DbsElg/cQV/SQ8COVjqIqghjy60Zxfh78E1WiFotthquqkS86nz13Za9wEbToe0svQ==",
+ "dev": true
+ },
"node_modules/@types/retry": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
@@ -3061,7 +3068,8 @@
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
- "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+ "dev": true
},
"node_modules/js-yaml": {
"version": "4.1.0",
@@ -3293,18 +3301,6 @@
"url": "https://tidelift.com/funding/github/npm/loglevel"
}
},
- "node_modules/loose-envify": {
- "version": "1.4.0",
- "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
- "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
- "peer": true,
- "dependencies": {
- "js-tokens": "^3.0.0 || ^4.0.0"
- },
- "bin": {
- "loose-envify": "cli.js"
- }
- },
"node_modules/lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -3498,15 +3494,6 @@
"node": "*"
}
},
- "node_modules/object-assign": {
- "version": "4.1.1",
- "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
- "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
- "peer": true,
- "engines": {
- "node": ">=0.10.0"
- }
- },
"node_modules/object-hash": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
@@ -3784,12 +3771,11 @@
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
},
"node_modules/photoswipe": {
- "version": "4.1.3",
- "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-4.1.3.tgz",
- "integrity": "sha512-89Z43IRUyw7ycTolo+AaiDn3W1EEIfox54hERmm9bI12IB9cvRfHSHez3XhAyU8XW2EAFrC+2sKMhh7SJwn0bA==",
- "peer": true,
+ "version": "5.2.2",
+ "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.2.2.tgz",
+ "integrity": "sha512-es0AEX4zgzzcrr8ztdPWRODSARCLqCm/5H/aSwFtZwovokGtzBf/y/HXJxHMnNx6h4650DkKVIVFYILXJhmMhw==",
"engines": {
- "node": ">= 0.8.0"
+ "node": ">= 0.12.0"
}
},
"node_modules/picocolors": {
@@ -3955,17 +3941,6 @@
"node": ">= 0.8.0"
}
},
- "node_modules/prop-types": {
- "version": "15.8.1",
- "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
- "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
- "peer": true,
- "dependencies": {
- "loose-envify": "^1.4.0",
- "object-assign": "^4.1.1",
- "react-is": "^16.13.1"
- }
- },
"node_modules/psl": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@@ -4025,34 +4000,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
- "node_modules/react": {
- "version": "18.0.0",
- "resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz",
- "integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==",
- "peer": true,
- "dependencies": {
- "loose-envify": "^1.1.0"
- },
- "engines": {
- "node": ">=0.10.0"
- }
- },
- "node_modules/react-is": {
- "version": "16.13.1",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
- "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
- "peer": true
- },
- "node_modules/react-photoswipe-gallery": {
- "version": "1.3.10",
- "resolved": "https://registry.npmjs.org/react-photoswipe-gallery/-/react-photoswipe-gallery-1.3.10.tgz",
- "integrity": "sha512-KIfhIjdqutX+FHEXw06gFsLgbBMSUW9Y5qAW+bI3deTNiSDmF1Sgfh/sKJF+gNkFZTWbmnhG2g7BsrjC7T9etg==",
- "peerDependencies": {
- "photoswipe": "^4.1.0",
- "prop-types": ">= 15.7.0",
- "react": ">= 16.8.0"
- }
- },
"node_modules/react-plock": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-plock/-/react-plock-1.2.0.tgz",
@@ -5436,6 +5383,12 @@
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
"dev": true
},
+ "@types/photoswipe": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/@types/photoswipe/-/photoswipe-4.1.2.tgz",
+ "integrity": "sha512-HA9TtCAQKToldgxRiyJ1DbsElg/cQV/SQ8COVjqIqghjy60Zxfh78E1WiFotthquqkS86nz13Za9wEbToe0svQ==",
+ "dev": true
+ },
"@types/retry": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
@@ -7062,7 +7015,8 @@
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
- "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+ "dev": true
},
"js-yaml": {
"version": "4.1.0",
@@ -7235,15 +7189,6 @@
"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.8.0.tgz",
"integrity": "sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA=="
},
- "loose-envify": {
- "version": "1.4.0",
- "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
- "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
- "peer": true,
- "requires": {
- "js-tokens": "^3.0.0 || ^4.0.0"
- }
- },
"lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -7397,12 +7342,6 @@
"resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
"integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="
},
- "object-assign": {
- "version": "4.1.1",
- "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
- "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
- "peer": true
- },
"object-hash": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
@@ -7601,10 +7540,9 @@
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
},
"photoswipe": {
- "version": "4.1.3",
- "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-4.1.3.tgz",
- "integrity": "sha512-89Z43IRUyw7ycTolo+AaiDn3W1EEIfox54hERmm9bI12IB9cvRfHSHez3XhAyU8XW2EAFrC+2sKMhh7SJwn0bA==",
- "peer": true
+ "version": "5.2.2",
+ "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.2.2.tgz",
+ "integrity": "sha512-es0AEX4zgzzcrr8ztdPWRODSARCLqCm/5H/aSwFtZwovokGtzBf/y/HXJxHMnNx6h4650DkKVIVFYILXJhmMhw=="
},
"picocolors": {
"version": "1.0.0",
@@ -7696,17 +7634,6 @@
"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
"dev": true
},
- "prop-types": {
- "version": "15.8.1",
- "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
- "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
- "peer": true,
- "requires": {
- "loose-envify": "^1.4.0",
- "object-assign": "^4.1.1",
- "react-is": "^16.13.1"
- }
- },
"psl": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@@ -7737,27 +7664,6 @@
"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
"dev": true
},
- "react": {
- "version": "18.0.0",
- "resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz",
- "integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==",
- "peer": true,
- "requires": {
- "loose-envify": "^1.1.0"
- }
- },
- "react-is": {
- "version": "16.13.1",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
- "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
- "peer": true
- },
- "react-photoswipe-gallery": {
- "version": "1.3.10",
- "resolved": "https://registry.npmjs.org/react-photoswipe-gallery/-/react-photoswipe-gallery-1.3.10.tgz",
- "integrity": "sha512-KIfhIjdqutX+FHEXw06gFsLgbBMSUW9Y5qAW+bI3deTNiSDmF1Sgfh/sKJF+gNkFZTWbmnhG2g7BsrjC7T9etg==",
- "requires": {}
- },
"react-plock": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-plock/-/react-plock-1.2.0.tgz",
diff --git a/package.json b/package.json
@@ -17,12 +17,12 @@
"matrix-js-sdk": "^16.0.1",
"preact": "^10.5.15",
"preact-router": "^4.0.1",
- "react-photoswipe-gallery": "^1.3.10",
"react-plock": "^1.2.0"
},
"devDependencies": {
"@preact/preset-vite": "^2.1.5",
"@types/events": "^3.0.0",
+ "@types/photoswipe": "^4.1.2",
"@typescript-eslint/eslint-plugin": "^5.17.0",
"@typescript-eslint/parser": "^5.17.0",
"autoprefixer": "^10.4.4",
@@ -34,4 +34,4 @@
"typescript": "^4.6.3",
"vite": "^2.9.0"
}
-}
+}
+\ No newline at end of file
diff --git a/src/components/post.tsx b/src/components/post.tsx
@@ -14,7 +14,9 @@ export class Post extends PureComponent<Props> {
render({ user, post }: Props) {
return (
<div class="flex flex-col">
- <a href="#" class="w-full"><img class="rounded-3xl shadow object-cover transform transition-transform ease-in-out duration-300 hover:scale-105" src={post.content.file.url} /></a>
+ <a id="gallery_click" href={post.content.file.url} class="w-full" target="_blank" rel="noreferrer">
+ <img class="rounded-3xl shadow object-cover transform transition-transform ease-in-out duration-300 hover:scale-105" 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} />
diff --git a/src/index.css b/src/index.css
@@ -97,25 +97,6 @@ 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%);
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -14,7 +14,7 @@ export class Home extends PureComponent<any, State> {
constructor() {
super();
this.state = {
- columns: this.settingColumns()
+ columns: this.settingColumns(),
};
}
@@ -38,6 +38,7 @@ export class Home extends PureComponent<any, State> {
componentWillUnmount() {
window.removeEventListener('resize', () => this.setState({ columns: this.settingColumns() }));
+ this.state.lightbox?.destroy();
}
render() {
@@ -48,14 +49,14 @@ export class Home extends PureComponent<any, State> {
</header>
<main class="m-12 mt-6">
<h1 class="text-3xl font-bold mb-4 text-white">Explore</h1>
- <div class="flex justify-center">
+ <div class="flex justify-center" id="gallery">
<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" } })} />
- <Post user={new UserData("", "Person D", "https://unsplash.com/photos/TW_z_iUD_bQ/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8ODR8fHBvcnRyYWl0fGVufDB8Mnx8fDE2NDg4NDQ3MjQ&force=true")} post={new PostData("", { file: { url: "https://unsplash.com/photos/FTQJBGDxKXg/download?ixid=MnwxMjA3fDB8MXxhbGx8M3x8fHx8fDJ8fDE2NDg4NDMyNDY&force=true" } })} />
- <Post user={new UserData("", "Person E", "https://unsplash.com/photos/kYtN89E5ce4/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MTA0fHxwb3J0cmFpdHxlbnwwfDJ8fHwxNjQ4ODQ0NzQy&force=true")} post={new PostData("", { file: { url: "https://unsplash.com/photos/zfhxiaZO3JE/download?ixid=MnwxMjA3fDB8MXxhbGx8Mjl8fHx8fHwyfHwxNjQ4ODQzMjQ1&force=true" } })} />
- <Post user={new UserData("", "Person E", "https://unsplash.com/photos/kBonaevi3yA/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MTE5fHxwb3J0cmFpdHxlbnwwfDJ8fHwxNjQ4ODQ0NzQy&force=true")} post={new PostData("", { file: { url: "https://unsplash.com/photos/jm-JKqrAXsA/download?ixid=MnwxMjA3fDB8MXxhbGx8MTAyfHx8fHx8Mnx8MTY0ODg0MzI1NQ&force=true" } })} />
+ <Post user={new UserData("", "Person A", "https://unsplash.com/photos/_cvwXhGqG-o/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8OHx8ZmFjZXxlbnwwfDJ8fHwxNjQ4Nzc5NzYx")} post={new PostData("", { file: { url: "https://unsplash.com/photos/UWmrTAQ75iA/download?ixid=MnwxMjA3fDB8MXxhbGx8Mnx8fHx8fDJ8fDE2NDg4MzI0Njg" } })} />
+ <Post user={new UserData("", "Person B", "https://unsplash.com/photos/uJ8LNVCBjFQ/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MTN8fGZhY2V8ZW58MHwyfHx8MTY0ODc3OTc2MQ")} post={new PostData("", { file: { url: "https://unsplash.com/photos/7ptbiEPxKMQ/download?ixid=MnwxMjA3fDB8MXxhbGx8OXx8fHx8fDJ8fDE2NDg4MzI0Njg" } })} />
+ <Post user={new UserData("", "Person C", "https://unsplash.com/photos/u3pi6HhSYew/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MTd8fGZhY2V8ZW58MHwyfHx8MTY0ODc3OTc2MQ")} post={new PostData("", { file: { url: "https://unsplash.com/photos/ZiPlVmmKEYA/download?ixid=MnwxMjA3fDB8MXxhbGx8Mzl8fHx8fHwyfHwxNjQ4ODM2MDIz" } })} />
+ <Post user={new UserData("", "Person D", "https://unsplash.com/photos/TW_z_iUD_bQ/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8ODR8fHBvcnRyYWl0fGVufDB8Mnx8fDE2NDg4NDQ3MjQ")} post={new PostData("", { file: { url: "https://unsplash.com/photos/FTQJBGDxKXg/download?ixid=MnwxMjA3fDB8MXxhbGx8M3x8fHx8fDJ8fDE2NDg4NDMyNDY" } })} />
+ <Post user={new UserData("", "Person E", "https://unsplash.com/photos/kYtN89E5ce4/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MTA0fHxwb3J0cmFpdHxlbnwwfDJ8fHwxNjQ4ODQ0NzQy")} post={new PostData("", { file: { url: "https://unsplash.com/photos/zfhxiaZO3JE/download?ixid=MnwxMjA3fDB8MXxhbGx8Mjl8fHx8fHwyfHwxNjQ4ODQzMjQ1" } })} />
+ <Post user={new UserData("", "Person E", "https://unsplash.com/photos/kBonaevi3yA/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MTE5fHxwb3J0cmFpdHxlbnwwfDJ8fHwxNjQ4ODQ0NzQy")} post={new PostData("", { file: { url: "https://unsplash.com/photos/jm-JKqrAXsA/download?ixid=MnwxMjA3fDB8MXxhbGx8MTAyfHx8fHx8Mnx8MTY0ODg0MzI1NQ" } })} />
</Plock>
</div>
</main>
