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

basic dynamic welcome popup

Browse Source
This commit is contained in:
Anton Tranelis 2024-04-26 11:29:14 +02:00
parent 2d56c5386d
commit 79e1e2e1d3
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -86,7 +86,7 @@ if(map && map.name){
<Permissions api={permissionsApiInstance} adminRole='8ed0b24e-3320-48cd-8444-bc152304e580'></Permissions> <Permissions api={permissionsApiInstance} adminRole='8ed0b24e-3320-48cd-8444-bc152304e580'></Permissions>
<Tags api={tagsApi}></Tags> <Tags api={tagsApi}></Tags>
<Modal> <Modal>
<ModalContent /> <ModalContent map={map} />
</Modal> </Modal>
<SideBar routes={[...routes, ...layerPageRoutes]} bottomRoutes={bottomRoutes} /> <SideBar routes={[...routes, ...layerPageRoutes]} bottomRoutes={bottomRoutes} />
<Content> <Content>

11
src/ModalContent.tsx
View File

@ -3,15 +3,16 @@ import { useState } from 'react'
type ChapterProps = { type ChapterProps = {
clickAction1?: () => void clickAction1?: () => void
clickAction2?: () => void clickAction2?: () => void
map?: any
} }
export function Welcome1({ clickAction1 }: ChapterProps) { export function Welcome1({ clickAction1, map }: ChapterProps) {
return ( return (
<> <>
<h3 className="font-bold text-lg">Welcome to the Community Ecosystem Map</h3> <h3 className="font-bold text-lg">Welcome to {map?.name || "Utopia Map"}</h3>
<img className="float-right w-32 m-2" src="/3markers-globe.svg"></img> <img className="float-right w-32 m-2" src={"https://api.utopia-lab.org/assets/"+map.logo}></img>
<p className="py-3"> <p className="py-3">
It is a tool for collaborative mapping to connect local initiatives, people and events. It is a tool for collaborative mapping to connect local initiatives, people and events.
</p> </p>
@ -96,7 +97,7 @@ const close = () => {
window.my_modal_3.close(); window.my_modal_3.close();
} }
export const ModalContent = () => { export const ModalContent = ({map}:{map: any}) => {
const [chapter, setChapter] = useState<number>(1); const [chapter, setChapter] = useState<number>(1);
//const setQuestsOpen = useSetQuestOpen() //const setQuestsOpen = useSetQuestOpen()
@ -106,7 +107,7 @@ export const ModalContent = () => {
const ActiveChapter = () => { const ActiveChapter = () => {
switch (chapter) { switch (chapter) {
case 1: case 1:
return <Welcome1 clickAction1={() => { return <Welcome1 map={map} clickAction1={() => {
close(); close();
setTimeout(() => { setTimeout(() => {