antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

init gallery component

Browse Source
This commit is contained in:
Anton Tranelis 2025-01-04 15:24:40 +00:00
parent db25259557
commit 7be57a5658
3 changed files with 42 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
package-lock.json generated
View File

@ -27,7 +27,8 @@
"react-toastify": "^9.1.3", "react-toastify": "^9.1.3",
"remark-breaks": "^4.0.0", "remark-breaks": "^4.0.0",
"tributejs": "^5.1.3", "tributejs": "^5.1.3",
"tw-elements": "^1.0.0" "tw-elements": "^1.0.0",
"yet-another-react-lightbox": "^3.21.7"
}, },
"devDependencies": { "devDependencies": {
"@eslint-community/eslint-plugin-eslint-comments": "^4.4.1", "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
@ -1170,9 +1171,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001617", "version": "1.0.30001686",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001617.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz",
"integrity": "sha512-mLyjzNI9I+Pix8zwcrpxEbGlfqOkF9kM3ptzmKNw5tizSyYwMe+nGLTqMK9cO+0E+Bh6TsBxNAaHWEM8xwSsmA==", "integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -7531,6 +7532,18 @@
"node": ">= 14" "node": ">= 14"
} }
}, },
"node_modules/yet-another-react-lightbox": {
"version": "3.21.7",
"resolved": "https://registry.npmjs.org/yet-another-react-lightbox/-/yet-another-react-lightbox-3.21.7.tgz",
"integrity": "sha512-dcdokNuCIl92f0Vl+uzeKULnQhztIGpoZFUMvtVNUPmtwsQWpqWufeieDPeg9JtFyVCcbj4vYw3V00DS0QNoWA==",
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/yocto-queue": { "node_modules/yocto-queue": {
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

3
package.json
View File

@ -73,7 +73,8 @@
"react-toastify": "^9.1.3", "react-toastify": "^9.1.3",
"remark-breaks": "^4.0.0", "remark-breaks": "^4.0.0",
"tributejs": "^5.1.3", "tributejs": "^5.1.3",
"tw-elements": "^1.0.0" "tw-elements": "^1.0.0",
"yet-another-react-lightbox": "^3.21.7"
}, },
"imports": { "imports": {
"#components/*": "./src/Components/*", "#components/*": "./src/Components/*",

23
src/Components/Profile/Subcomponents/GalleryView.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useState } from 'react'
import Lightbox from 'yet-another-react-lightbox/*'
import type { Item } from '#types/Item'
export const GalleryView = ({ item }: { item: Item }) => {
const [open, setOpen] = useState(false)
// eslint-disable-next-line no-console
console.log(item)
return (
<>
<button type='button' onClick={() => setOpen(true)}>
Open Lightbox
</button>
<Lightbox
open={open}
close={() => setOpen(false)}
slides={[{ src: '/image1.jpg' }, { src: '/image2.jpg' }, { src: '/image3.jpg' }]}
/>
</>
)
}