wisplite/raster
1
0
Fork 0
mirror of https://github.com/wisplite/raster.git synced 2026-05-01 06:32:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add reusable modal component

Browse Source
This commit is contained in:
wisplite
2025-11-20 17:36:33 -06:00
parent 33e925089e
commit 1fea638628
6 changed files with 114 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package-lock.json
Generated
+37
View File
@@ -8,6 +8,7 @@
"name": "frontend",
"version": "0.0.0",
"dependencies": {
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-popover": "^1.1.15",
"@tailwindcss/vite": "^4.1.12",
"lucide-react": "^0.554.0",
@@ -1114,6 +1115,42 @@
}
}
},
"node_modules/@radix-ui/react-dialog": {
"version": "1.1.15",
"resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
"integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
"license": "MIT",
"dependencies": {
"@radix-ui/primitive": "1.1.3",
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-dismissable-layer": "1.1.11",
"@radix-ui/react-focus-guards": "1.1.3",
"@radix-ui/react-focus-scope": "1.1.7",
"@radix-ui/react-id": "1.1.1",
"@radix-ui/react-portal": "1.1.9",
"@radix-ui/react-presence": "1.1.5",
"@radix-ui/react-primitive": "2.1.3",
"@radix-ui/react-slot": "1.2.3",
"@radix-ui/react-use-controllable-state": "1.2.2",
"aria-hidden": "^1.2.4",
"react-remove-scroll": "^2.6.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-dismissable-layer": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
frontend/package.json
+1
View File
@@ -10,6 +10,7 @@
"preview": "vite preview"
},
"dependencies": {
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-popover": "^1.1.15",
"@tailwindcss/vite": "^4.1.12",
"lucide-react": "^0.554.0",
frontend/src/components/Modal.jsx
+46
View File
@@ -0,0 +1,46 @@
import * as Dialog from '@radix-ui/react-dialog';
import { X } from 'lucide-react';
export default function Modal({ open, onOpenChange, trigger, title, children, isProtected = false }) {
return (
<Dialog.Root open={open} onOpenChange={onOpenChange}>
{trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 bg-black/60 z-50" />
<Dialog.Content
onInteractOutside={(e) => {
if (isProtected) e.preventDefault();
}}
onEscapeKeyDown={(e) => {
if (isProtected) {
if (!window.confirm("Are you sure you want to close this?")) {
e.preventDefault();
}
}
}}
className="fixed left-[50%] top-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-lg bg-[#141414] border border-[#2B2B2B] shadow-xl focus:outline-none z-50 overflow-hidden">
<div className="flex items-center justify-between px-4 py-3 border-b border-[#2B2B2B] bg-[#1A1A1A]">
<Dialog.Title className="text-sm font-bold text-white red-hat-text">
{title}
</Dialog.Title>
<Dialog.Close
onClick={(e) => {
if (isProtected) {
if (!window.confirm("Are you sure you want to close this?")) {
e.preventDefault();
}
}
}}
className="text-gray-400 hover:text-white transition-colors cursor-pointer outline-none">
<X className="w-4 h-4" />
</Dialog.Close>
</div>
<div className="p-4 text-gray-300 red-hat-text">
{children}
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
);
}
frontend/src/gallery/components/AlbumCreateModal.jsx
+12
View File
@@ -0,0 +1,12 @@
import Modal from '../../components/Modal'
export default function AlbumCreateModal({ open, onOpenChange, trigger }) {
return (
<Modal open={open} onOpenChange={onOpenChange} trigger={trigger} title="Create Album">
<div className="flex flex-col gap-2">
<input type="text" placeholder="Name" className="w-full px-3 py-2.5 bg-[#141414] border border-[#2B2B2B] rounded-md text-white placeholder-gray-600 focus:outline-none focus:border-[#3B3B3B] transition-colors red-hat-text" />
<textarea type="text" placeholder="Description" className="w-full h-[20vh] px-3 py-2.5 bg-[#141414] border border-[#2B2B2B] rounded-md text-white placeholder-gray-600 focus:outline-none focus:border-[#3B3B3B] transition-colors red-hat-text resize-none" />
<button className="w-full py-2.5 bg-[#2B2B2B] hover:bg-[#3B3B3B] text-white rounded-md font-medium transition-colors red-hat-mono cursor-pointer mt-2">Create Album</button>
</div>
</Modal>
)
}
frontend/src/gallery/components/AlbumList.jsx
+15
View File
@@ -0,0 +1,15 @@
import { PlusIcon } from 'lucide-react'
import AlbumCreateModal from './AlbumCreateModal'
import { useState } from 'react'
export default function AlbumList() {
const [open, setOpen] = useState(false)
return (
<div className="flex flex-col items-center justify-start h-full w-full bg-[#141414]">
<div className="flex flex-row items-center justify-between gap-2 w-full px-6 py-4">
<h1 className="text-xl font-bold text-white red-hat-mono">Albums</h1>
<PlusIcon className="w-6 h-6 cursor-pointer" color="white" onClick={() => setOpen(true)} />
</div>
<AlbumCreateModal open={open} onOpenChange={setOpen} />
</div>
)
}
frontend/src/gallery/index.jsx
+2
View File
@@ -2,6 +2,7 @@ import NavBar from '../components/NavBar'
import { useLocation } from 'react-router-dom';
import { useAccount } from '../contexts/useAccount';
import { useEffect } from 'react';
import AlbumList from './components/AlbumList';
export default function Gallery() {
const currentPath = useLocation().pathname;
const pathList = currentPath.split('/').slice(1);
@@ -14,6 +15,7 @@ export default function Gallery() {
return (
<div className="flex flex-col items-center justify-start h-full w-full bg-[#141414]">
<NavBar path={pathList} />
<AlbumList />
</div>
)
}