mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
Merge pull request #92 from utopia-os/gallery-component
feat(source): gallery component
This commit is contained in:
antontranelis
GitHub
commit
44c17b5908
52
package-lock.json
generated
52
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "utopia-ui",
|
||||
"version": "3.0.34",
|
||||
"version": "3.0.35",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "utopia-ui",
|
||||
"version": "3.0.34",
|
||||
"version": "3.0.35",
|
||||
"license": "GPL-3.0-only",
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.0.17",
|
||||
@ -22,12 +22,14 @@
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-leaflet-cluster": "^2.1.0",
|
||||
"react-markdown": "^9.0.1",
|
||||
"react-photo-album": "^3.0.2",
|
||||
"react-router-dom": "^6.16.0",
|
||||
"react-string-replace": "^1.1.1",
|
||||
"react-toastify": "^9.1.3",
|
||||
"remark-breaks": "^4.0.0",
|
||||
"tributejs": "^5.1.3",
|
||||
"tw-elements": "^1.0.0"
|
||||
"tw-elements": "^1.0.0",
|
||||
"yet-another-react-lightbox": "^3.21.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
|
||||
@ -405,11 +407,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/geojson": {
|
||||
"version": "7946.0.14",
|
||||
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
|
||||
"integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
"version": "7946.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.15.tgz",
|
||||
"integrity": "sha512-9oSxFzDCT2Rj6DfcHF8G++jxBKS7mBqXl5xrRW+Kbvjry6Uduya2iiwqHPhVXpasAVMBYKkEPGgKhd3+/HZ6xA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/hast": {
|
||||
"version": "3.0.3",
|
||||
@ -1170,9 +1171,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001617",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001617.tgz",
|
||||
"integrity": "sha512-mLyjzNI9I+Pix8zwcrpxEbGlfqOkF9kM3ptzmKNw5tizSyYwMe+nGLTqMK9cO+0E+Bh6TsBxNAaHWEM8xwSsmA==",
|
||||
"version": "1.0.30001686",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz",
|
||||
"integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@ -6043,6 +6044,23 @@
|
||||
"react": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-photo-album": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-photo-album/-/react-photo-album-3.0.2.tgz",
|
||||
"integrity": "sha512-w3+8i6aj9l1jRfcubgVbAlBGSdtiXcqWdcwZcH4/Bavc+v7X7h+S3TkQ723pvDABjhaaxS168g9ECEBP6xnKrQ==",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": ">=18",
|
||||
"react": ">=18"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.16.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",
|
||||
@ -7531,6 +7549,18 @@
|
||||
"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": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "utopia-ui",
|
||||
"version": "3.0.34",
|
||||
"version": "3.0.35",
|
||||
"description": "Reuseable React Components to build mapping apps for real life communities and networks",
|
||||
"repository": "https://github.com/utopia-os/utopia-ui",
|
||||
"homepage:": "https://utopia-os.org/",
|
||||
@ -69,12 +69,14 @@
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-leaflet-cluster": "^2.1.0",
|
||||
"react-markdown": "^9.0.1",
|
||||
"react-photo-album": "^3.0.2",
|
||||
"react-router-dom": "^6.16.0",
|
||||
"react-string-replace": "^1.1.1",
|
||||
"react-toastify": "^9.1.3",
|
||||
"remark-breaks": "^4.0.0",
|
||||
"tributejs": "^5.1.3",
|
||||
"tw-elements": "^1.0.0"
|
||||
"tw-elements": "^1.0.0",
|
||||
"yet-another-react-lightbox": "^3.21.7"
|
||||
},
|
||||
"imports": {
|
||||
"#components/*": "./src/Components/*",
|
||||
|
||||
@ -62,7 +62,7 @@ export default function NavBar({ appName, userType }: { appName: string; userTyp
|
||||
if (showNav) {
|
||||
return (
|
||||
<>
|
||||
<div className='tw-navbar tw-bg-base-100 tw-z-[10000] tw-shadow-xl tw-relative'>
|
||||
<div className='tw-navbar tw-bg-base-100 tw-z-[9998] tw-shadow-xl tw-relative'>
|
||||
<button
|
||||
className='tw-btn tw-btn-square tw-btn-ghost'
|
||||
data-te-sidenav-toggle-ref
|
||||
|
||||
37
src/Components/Profile/Subcomponents/GalleryView.tsx
Normal file
37
src/Components/Profile/Subcomponents/GalleryView.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
||||
/* eslint-disable @typescript-eslint/restrict-template-expressions */
|
||||
/* eslint-disable @typescript-eslint/no-unsafe-call */
|
||||
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
|
||||
import { useState } from 'react'
|
||||
import { RowsPhotoAlbum } from 'react-photo-album'
|
||||
import ReactLightbox from 'yet-another-react-lightbox'
|
||||
import 'yet-another-react-lightbox/styles.css'
|
||||
import 'react-photo-album/rows.css'
|
||||
|
||||
import { useAppState } from '#components/AppShell/hooks/useAppState'
|
||||
|
||||
import type { Item } from '#types/Item'
|
||||
|
||||
export const GalleryView = ({ item }: { item: Item }) => {
|
||||
const [index, setIndex] = useState(-1)
|
||||
const appState = useAppState()
|
||||
const images = item.gallery.map((i, j) => {
|
||||
return {
|
||||
src: appState.assetsApi.url + `${i.directus_files_id.id}.jpg`,
|
||||
width: i.directus_files_id.width,
|
||||
height: i.directus_files_id.height,
|
||||
index: j,
|
||||
}
|
||||
})
|
||||
return (
|
||||
<div className='tw-mx-6 tw-mb-6'>
|
||||
<RowsPhotoAlbum
|
||||
photos={images}
|
||||
targetRowHeight={150}
|
||||
onClick={({ index: current }) => setIndex(current)}
|
||||
/>
|
||||
|
||||
<ReactLightbox index={index} slides={images} open={index >= 0} close={() => setIndex(-1)} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -3,6 +3,7 @@
|
||||
/* eslint-disable @typescript-eslint/no-unsafe-call */
|
||||
|
||||
import { ContactInfoView } from '#components/Profile/Subcomponents/ContactInfoView'
|
||||
import { GalleryView } from '#components/Profile/Subcomponents/GalleryView'
|
||||
import { GroupSubHeaderView } from '#components/Profile/Subcomponents/GroupSubHeaderView'
|
||||
import { ProfileStartEndView } from '#components/Profile/Subcomponents/ProfileStartEndView'
|
||||
import { ProfileTextView } from '#components/Profile/Subcomponents/ProfileTextView'
|
||||
@ -14,6 +15,7 @@ const componentMap = {
|
||||
texts: ProfileTextView,
|
||||
contactInfos: ContactInfoView,
|
||||
startEnd: ProfileStartEndView,
|
||||
gallery: GalleryView,
|
||||
// weitere Komponenten hier
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user