antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2026-01-20 20:01:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

ItemViewPage

Browse Source
This commit is contained in:
Anton Tranelis 2024-02-29 10:12:48 +01:00
parent 52c55e328b
commit 82ebd493b9
7 changed files with 72 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/Components/Templates/CardPage.tsx
View File

@ -3,11 +3,11 @@ import * as React from "react"
import {TitleCard} from "./TitleCard"
export function CardPage({title, hideTitle, children, parent} : {
export function CardPage({title, hideTitle, children, parents} : {
title: string,
hideTitle?: boolean,
children?: React.ReactNode,
parent?: {name: string, url: string}
parents?: Array<{name: string, path: string}>
}) {
@ -17,7 +17,7 @@ export function CardPage({title, hideTitle, children, parent} : {
<div className="tw-text-sm tw-breadcrumbs">
<ul>
<li><Link to={'/'} >Home</Link></li>
{parent && <li><Link to={parent?.url ? parent?.url : ""}>{parent?.name}</Link></li>}
{parents?.map((b,i) => <li key={i}><Link to={b.path} >{b.name}</Link></li>)}
<li>{title}</li>
</ul>
</div>

53
src/Components/Templates/ItemViewPage.tsx Normal file
View File

@ -0,0 +1,53 @@
import { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
import { CardPage } from "./CardPage";
import { ItemsApi } from "../../types";
import { getValue } from "../../Utils/GetValue";
type breadcrumb = {
name: string,
path: string
}
export const ItemViewPage = ({ api, parents, itemNameField, itemTextField, itemImageField, itemSymbolField }: { api: ItemsApi<any>, parents: Array<breadcrumb>, itemNameField: string, itemTextField: string, itemImageField: string, itemSymbolField: string }) => {
const [item, setItem] = useState<any>();
let location = useLocation();
const loadProject = async () => {
if (api?.getItem) {
const project: unknown = await api?.getItem(location.pathname.split("/")[2]);
setItem(project as any);
}
}
useEffect(() => {
loadProject();
}, [api])
return (
<CardPage title={getValue(item, itemNameField) || ""} parents={parents}>
{item &&
<>
{getValue(item, itemImageField) ?
<div className=' tw-h-36 flex items-center justify-center '>
<img className='tw-h-24' src={`https://api.utopia-lab.org/assets/${getValue(item, itemImageField)}`}></img>
</div> :
<div className="tw-h-36 !bg-transparent tw-flex tw-items-center tw-justify-center tw-text-7xl">
{getValue(item, itemSymbolField)}
</div>
}
<p className='text-sm mb-2'>{getValue(item, itemTextField)}</p>
</>
}
</CardPage>
)
}

17
src/Components/Templates/ItemsIndexPage.tsx
View File

@ -11,7 +11,7 @@ type breadcrumb = {
}
export const ItemsIndexPage = ({ api, url, parameterField, breadcrumbs, itemNameField, itemTextField, itemImageField }: { api: ItemsApi<any>, url: string, parameterField: string, breadcrumbs: Array<breadcrumb>, itemNameField: string, itemTextField: string, itemImageField: string }) => {
export const ItemsIndexPage = ({ api, url, parameterField, breadcrumbs, itemNameField, itemTextField, itemImageField, itemSymbolField }: { api: ItemsApi<any>, url: string, parameterField: string, breadcrumbs: Array<breadcrumb>, itemNameField: string, itemTextField: string, itemImageField: string, itemSymbolField: string }) => {
const [items, setItems] = useState<any[]>();
@ -32,7 +32,7 @@ export const ItemsIndexPage = ({ api, url, parameterField, breadcrumbs, itemName
{breadcrumbs &&
<div className="tw-text-sm tw-breadcrumbs">
<ul>
{breadcrumbs.map(b => <li><Link to={b.path} >{b.name}</Link></li>)}
{breadcrumbs.map((b,i) => <li key={i}><Link to={b.path} >{b.name}</Link></li>)}
</ul>
</div>}
{/**
@ -51,12 +51,19 @@ export const ItemsIndexPage = ({ api, url, parameterField, breadcrumbs, itemName
items?.map((i, k) => {
return (
<Link key={k} to={url + getValue(i, parameterField)}>
<TitleCard className={"!tw-h-96"} title={getValue(i,itemNameField)} topMargin={"tw-mt-2"}>
<img className='tw-h-36' src={`https://api.utopia-lab.org/assets/${getValue(i,itemImageField)}`}></img>
<TitleCard className={"!tw-h-96 "} title={getValue(i, itemNameField)} topMargin={"tw-mt-2"}>
{getValue(i,itemImageField) ?
<div className=' tw-h-36 flex items-center justify-center '>
<img className='tw-h-24' src={`https://api.utopia-lab.org/assets/${getValue(i, itemImageField)}`}></img>
</div> :
<div className="tw-h-36 !bg-transparent tw-flex tw-items-center tw-justify-center tw-text-7xl">
{getValue(i,itemSymbolField)}
</div>
}
<p className='tw-font-bold tw-text-sm tw-mt-2'>{i.subname}</p>
<p className='tw-text-sm tw-mt-2 tw-mb-2'>{getValue(i,itemTextField)}</p>
<p className='tw-text-sm tw-mt-2 tw-mb-2'>{getValue(i, itemTextField)}</p>
{/**
* <div className='flex justify-between text-gray-500 '>
<div className='flex'><UsersIcon className=' h-6 w-6' />&nbsp;2</div>

1
src/Components/Templates/index.tsx
View File

@ -4,3 +4,4 @@ export {MapOverlayPage} from './MapOverlayPage'
export {CircleLayout} from './CircleLayout'
export {MoonCalendar} from './MoonCalendar'
export {ItemsIndexPage} from "./ItemsIndexPage"
export {ItemViewPage} from "./ItemViewPage"

2
src/Utils/GetValue.ts
View File

@ -1,5 +1,5 @@
export function getValue(obj, path) {
if (!obj) return undefined; // Return early if obj is falsy
if (!obj || typeof path !== 'string') return undefined;
var pathArray = path.split('.'); // Use a different variable for the split path
for (var i = 0, len = pathArray.length; i < len; i++) {

2
src/index.tsx
View File

@ -3,7 +3,7 @@ export {AppShell, Content, SideBar} from "./Components/AppShell"
export {AuthProvider, useAuth, LoginPage, SignupPage, RequestPasswordPage, SetNewPasswordPage} from "./Components/Auth"
export {UserSettings, ProfileSettings, OverlayProfile, OverlayProfileSettings, OverlayUserSettings} from './Components/Profile'
export {Quests, Modal} from './Components/Gaming'
export {TitleCard, CardPage, MapOverlayPage, CircleLayout, MoonCalendar, ItemsIndexPage} from './Components/Templates'
export {TitleCard, CardPage, MapOverlayPage, CircleLayout, MoonCalendar, ItemsIndexPage, ItemViewPage} from './Components/Templates'
export {TextInput, TextAreaInput, SelectBox} from './Components/Input'
import "./index.css"

1
src/types.ts
View File

@ -79,6 +79,7 @@ export interface Tag {
export interface ItemsApi<T> {
getItems(): Promise<any>,
getItem?(item: T): Promise<any>,
createItem?(item : T): Promise<any>,
updateItem?(item : T): Promise<any>,
deleteItem?(id : string): Promise<any>,