65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
|
import type { Config, Item, Page } from "#/lib/config/types.ts";
|
||
|
|
import { useState } from "preact/hooks";
|
||
|
|
|
||
|
|
|
||
|
|
interface MagicPageProps {
|
||
|
|
config: Config;
|
||
|
|
page: Page;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
export default function MagicPage(props: MagicPageProps) {
|
||
|
|
const {page, config} = props
|
||
|
|
const [iframeUrl, setIframeUrl]= useState<string | undefined>(undefined)
|
||
|
|
return (
|
||
|
|
<div class="flex flex-row h-full">
|
||
|
|
<div class="mx-auto flex flex-col justify-top">
|
||
|
|
{
|
||
|
|
page?.categories?.map((category, idx) => {
|
||
|
|
return (
|
||
|
|
<div class="mb-8" key={category.name || `category-idx-${idx}`}>
|
||
|
|
<h2 class="text-2xl font-bold">{category.name}</h2>
|
||
|
|
<div class="flex flex-row">
|
||
|
|
{
|
||
|
|
category.items?.map((item,idx) => {
|
||
|
|
return (
|
||
|
|
<div class="bg-white pr-2 py-2" key={item.name || `item-idx-${idx}`}>
|
||
|
|
<div
|
||
|
|
class={`hover:cursor-pointer`}
|
||
|
|
onMouseDown={(e)=>{
|
||
|
|
console.log("click event", e)
|
||
|
|
if(e.buttons === 4) {
|
||
|
|
globalThis.window.open(item.href, "_blank")
|
||
|
|
} else if(e.buttons === 1) {
|
||
|
|
if(item.iframe) {
|
||
|
|
setIframeUrl(item.href)
|
||
|
|
} else{
|
||
|
|
globalThis.window.open(item.href, "_blank")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}}>
|
||
|
|
<h3
|
||
|
|
class={`text-md text-cyan-800 hover:underline`}>{item.iframe && "!"}{item.name}</h3>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
<div class="flex grow">
|
||
|
|
{iframeUrl &&
|
||
|
|
<iframe
|
||
|
|
class="w-full h-full"
|
||
|
|
src={iframeUrl}
|
||
|
|
></iframe>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|