ItemsIndexPage

src/Components/Templates/ItemsIndexPage.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom';
+import { ItemsApi } from '../../types';
+import { getValue } from '../../Utils/GetValue';
+import { TitleCard } from './TitleCard';
+
+
+type breadcrumb = {
+  name: string,
+  path: string
+}
+
+
+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 }) => {
+
+
+  const [items, setItems] = useState<any[]>();
+
+  const loadProjects = async () => {
+    const items = await api?.getItems();
+    setItems(items as any);
+  }
+
+
+  useEffect(() => {
+    loadProjects();
+  }, [api])
+
+  return (
+    <main className="tw-flex-1 tw-overflow-y-auto tw-pt-2 tw-px-6  tw-bg-base-200 tw-min-w-80 tw-flex tw-justify-center" >
+      <div className=' tw-w-full xl:tw-max-w-6xl'>
+        {breadcrumbs &&
+          <div className="tw-text-sm tw-breadcrumbs">
+            <ul>
+              {breadcrumbs.map(b => <li><Link to={b.path} >{b.name}</Link></li>)}
+            </ul>
+          </div>}
+        {/**
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4 mt-2 ">
+             <TextInput defaultValue='' placeholder='🔍 Search' containerStyle='lg:col-span-2' updateFormValue={(val) => { setSearch(val) }}></TextInput>
+          <SelectBox updateFormValue={() => { }} placeholder="Type" containerStyle=' hidden md:grid' defaultValue='PLACEHOLDER' options={[{ name: "local", value: "local" }, { name: "project", value: "project" }]} />
+        </div>
+        <div className="divider" ></div>
+
+         */}
+
+
+
+        <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-6 ">
+          {
+            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>
+                    <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>
+                    {/**
+ *                  <div className='flex justify-between text-gray-500 '>
+                    <div className='flex'><UsersIcon className=' h-6 w-6' />&nbsp;2</div>
+                    <div className='flex'><MapPinIcon className='h-6 w-6' />&nbsp;5</div>
+                    <div className='flex'><CalendarIcon className='h-6 w-6' />&nbsp;9</div>
+                  </div>
+ 
+ */}
+
+
+                  </TitleCard>
+                </Link>
+              )
+
+            })
+          }
+        </div>
+      </div>
+    </main>
+
+
+  )
+}

src/Components/Templates/index.tsx

@@ -2,4 +2,5 @@ export {CardPage} from './CardPage'
 export {TitleCard} from './TitleCard'
 export {MapOverlayPage} from './MapOverlayPage' 
 export {CircleLayout} from './CircleLayout'
-export {MoonCalendar} from './MoonCalendar'
+export {MoonCalendar} from './MoonCalendar'
+export {ItemsIndexPage} from "./ItemsIndexPage"

src/index.tsx

@@ -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} from './Components/Templates'
+export {TitleCard, CardPage, MapOverlayPage, CircleLayout, MoonCalendar, ItemsIndexPage} from './Components/Templates'
 export {TextInput, TextAreaInput, SelectBox} from './Components/Input'
 
 import "./index.css"