mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
Ulf Gebhardt
9668f8d417
* support for svg files Support to load svg files and include them as bas64 encoded images in the bundle. * navbar svgs * replace NavBar SVGs with heroicons * layercontrol icons * lint fix * quest - questionmark * plusbutton - plus * linkeditem - elipse-vertical - link-slash * contactinfo - envelope & phone * avatar - arrow-up-tray * ActionButton - link & plus * StartEndView - calendar x2 * HeaderView - ellipse-vertical & pencil & trash * SidebarControl - bars-3 * SearchControl - flag & magnifying-glass * GratitudeControl - heart * FilterControl - funnel * AddButton - plus * reduce test coverage requirements * remove wrongfully commit dummy svg * updated obsolete package.lock * migrate more svgs from code to file, use hero icons where it seems applicable * moved share icons to subfolder * fixed layout --------- Co-authored-by: Anton Tranelis <mail@antontranelis.de>
100 lines
3.3 KiB
TypeScript
100 lines
3.3 KiB
TypeScript
import QuestionMarkCircleIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
import { useAuth } from '#components/Auth/useAuth'
|
|
import { useItems } from '#components/Map/hooks/useItems'
|
|
|
|
import { useQuestsOpen, useSetQuestOpen } from './hooks/useQuests'
|
|
|
|
import type { Item } from '#types/Item'
|
|
|
|
/**
|
|
* @category Gaming
|
|
*/
|
|
export function Quests() {
|
|
const questsOpen = useQuestsOpen()
|
|
const setQuestsOpen = useSetQuestOpen()
|
|
const { isAuthenticated, user } = useAuth()
|
|
|
|
useEffect(() => {
|
|
setQuestsOpen(false)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
const [profile, setProfie] = useState<Item>()
|
|
|
|
const items = useItems()
|
|
|
|
useEffect(() => {
|
|
setProfie(
|
|
items.find(
|
|
(i) =>
|
|
i.user_created?.id === user?.id &&
|
|
i.layer?.userProfileLayer &&
|
|
i.user_created?.id != null,
|
|
),
|
|
)
|
|
}, [items, user])
|
|
|
|
return (
|
|
<>
|
|
{questsOpen ? (
|
|
<div className='tw-card tw-w-48 tw-bg-base-100 tw-shadow-xl tw-absolute tw-bottom-4 tw-left-4 tw-z-[2000]'>
|
|
<div className='tw-card-body tw-p-4 tw-pt-0'>
|
|
<div className='tw-card-actions tw-justify-end'>
|
|
<label
|
|
className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-1 tw-top-1'
|
|
onClick={() => setQuestsOpen(false)}
|
|
>
|
|
✕
|
|
</label>
|
|
</div>
|
|
<h2 className='tw-card-title tw-m-auto '>
|
|
Level 1
|
|
<QuestionMarkCircleIcon />
|
|
</h2>
|
|
<ul className='tw-flex-row'>
|
|
<li>
|
|
<label className='tw-label tw-justify-normal tw-pt-1 tw-pb-0'>
|
|
<input
|
|
type='checkbox'
|
|
readOnly={true}
|
|
className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
|
|
checked={isAuthenticated || false}
|
|
/>
|
|
<span className='tw-text-sm tw-label-text tw-mx-2'>Sign Up</span>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label className='tw-label tw-justify-normal tw-pt-1 tw-pb-0'>
|
|
<input
|
|
type='checkbox'
|
|
readOnly={true}
|
|
className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
|
|
checked={!!profile?.text}
|
|
/>
|
|
<span className='tw-text-sm tw-label-text tw-mx-2'>Fill Profile</span>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label className='tw-label tw-justify-normal tw-pt-1 tw-pb-0'>
|
|
<input
|
|
type='checkbox'
|
|
readOnly={true}
|
|
className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
|
|
checked={!!profile?.image}
|
|
/>
|
|
<span className='tw-text-sm tw-label-text tw-mx-2'>Upload Avatar</span>
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
{/** <button className='tw-btn tw-btn-xs tw-btn-neutral tw-w-fit tw-self-center tw-mt-1'>Next ></button> */}{' '}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
''
|
|
)}
|
|
</>
|
|
)
|
|
}
|