jbilcke-hf's picture
jbilcke-hf HF staff
let's use two pages
5dd2af5
raw
history blame
10.6 kB
"use client"
import { Panel } from "@/app/interface/panel"
import { pick } from "@/lib/pick"
import { Grid } from "@/app/interface/grid"
import { LayoutProps } from "@/types"
import { NB_PANELS_PER_PAGE } from "@/config"
export function Layout0({ page, nbPanels }: LayoutProps) {
return (
<Grid className="grid-cols-2 grid-rows-2">
<div className="bg-stone-100 col-span-1 row-span-1">
<Panel
page={page}
nbPanels={nbPanels}
panel={0}
width={1024}
height={1024}
/>
</div>
<div className="bg-zinc-100 col-span-1 row-span-1">
<Panel
page={page}
nbPanels={nbPanels}
panel={1}
width={1024}
height={1024}
/>
</div>
<div className="bg-gray-100 col-span-1 row-span-1">
<Panel
page={page}
nbPanels={nbPanels}
panel={2}
width={1024}
height={1024}
/>
</div>
<div className="bg-slate-100 col-span-1 row-span-1">
<Panel
page={page}
nbPanels={nbPanels}
panel={3}
width={1024}
height={1024}
/>
</div>
</Grid>
)
}
export function Layout1({ page, nbPanels }: LayoutProps) {
return (
<Grid className="grid-cols-2 grid-rows-3">
<div className="bg-stone-100">
<Panel
page={page}
nbPanels={nbPanels}
panel={0}
width={1024}
height={768}
/>
</div>
<div className="bg-zinc-100 row-span-2">
<Panel
page={page}
nbPanels={nbPanels}
panel={1}
width={768}
height={1024}
/>
</div>
<div className="bg-gray-100 row-span-2 col-span-1">
<Panel
page={page}
nbPanels={nbPanels}
panel={2}
width={768}
height={1024}
/>
</div>
<div className="bg-slate-100">
<Panel
page={page}
nbPanels={nbPanels}
panel={3}
width={1024}
height={768}
/>
</div>
</Grid>
)
}
export function Layout2_todo({ page, nbPanels }: LayoutProps) {
return (
<Grid className="grid-cols-2 grid-rows-3">
<div className="bg-gray-100 row-span-3 col-span-1">
<Panel
page={page}
nbPanels={nbPanels}
panel={0}
width={768}
height={1024}
/>
</div>
<div className="bg-slate-100">
<Panel
page={page}
nbPanels={nbPanels}
panel={1}
width={1024}
height={768}
/>
</div>
<div className="bg-stone-100">
<Panel
page={page}
nbPanels={nbPanels}
panel={2}
width={1024}
height={768}
/>
</div>
<div className="bg-zinc-100 row-span-1 col-span-1">
<Panel
page={page}
nbPanels={nbPanels}
panel={3}
width={1024}
height={768}
/>
</div>
</Grid>
)
}
export function Layout3_todo({ page, nbPanels }: LayoutProps) {
return (
<Grid className="grid-cols-5 grid-rows-2">
<div className="bg-zinc-100 col-span-3">
<Panel
page={page}
nbPanels={nbPanels}
panel={0}
width={1024}
height={768}
/>
</div>
<div className="bg-zinc-100 col-span-2 row-span-2">
<Panel
page={page}
nbPanels={nbPanels}
panel={1}
width={768}
height={1024}
/>
</div>
<div className="col-span-3 grid grid-cols-2 gap-2">
<div className="bg-stone-100">
<Panel
page={page}
nbPanels={nbPanels}
panel={2}
width={768}
height={758}
/>
</div>
<div className="bg-slate-100">
<Panel
page={page}
nbPanels={nbPanels}
panel={3}
width={768}
height={758}
/>
</div>
</div>
</Grid>
)
}
export function Layout4_todo({ page, nbPanels }: LayoutProps) {
return (
<Grid className="grid-cols-2 grid-rows-3">
<div className="bg-slate-100 row-span-2">
<Panel
page={page}
nbPanels={nbPanels}
panel={0}
width={768}
height={1024}
/>
</div>
<div className="bg-gray-100 row-span-1 col-span-1">
<Panel
page={page}
nbPanels={nbPanels}
panel={1}
width={1024}
height={768}
/>
</div>
<div className="bg-zinc-100 row-span-2">
<Panel
page={page}
nbPanels={nbPanels}
panel={2}
width={1024}
height={768}
/>
</div>
<div className="bg-stone-100">
<Panel
page={page}
nbPanels={nbPanels}
panel={3}
width={768}
height={1024}
/>
</div>
</Grid>
)
}
export function Layout2({ page, nbPanels }: LayoutProps) {
return (
<Grid className="grid-cols-3 grid-rows-2">
<div className="bg-zinc-100 col-span-1 row-span-1">
<Panel
page={page}
nbPanels={nbPanels}
panel={0}
width={768}
height={1024}
/>
</div>
<div className="bg-zinc-100 col-span-1 row-span-1">
<Panel
page={page}
nbPanels={nbPanels}
panel={1}
width={768}
height={1024}
/>
</div>
<div className="bg-stone-100 row-span-2 col-span-1">
<Panel
page={page}
nbPanels={nbPanels}
panel={2}
width={512}
height={1024}
/>
</div>
<div className="bg-slate-100 row-span-1 col-span-2">
<Panel
page={page}
nbPanels={nbPanels}
panel={3}
width={1024}
height={768}
/>
</div>
</Grid>
)
}
export function Layout3({ page, nbPanels }: LayoutProps) {
return (
<Grid className="grid-cols-3 grid-rows-2">
<div className="bg-zinc-100 col-span-2 row-span-1">
<Panel
page={page}
nbPanels={nbPanels}
panel={0}
width={1024}
height={768}
/>
</div>
<div className="bg-zinc-100 col-span-1 row-span-1">
<Panel
page={page}
nbPanels={nbPanels}
panel={1}
width={768}
height={1024}
/>
</div>
<div className="bg-stone-100 row-span-1 col-span-1">
<Panel
page={page}
nbPanels={nbPanels}
panel={2}
width={768}
height={1024}
/>
</div>
<div className="bg-slate-100 row-span-1 col-span-2">
<Panel
page={page}
nbPanels={nbPanels}
panel={3}
width={1024}
height={768}
/>
</div>
</Grid>
)
}
// squares + vertical
export function Layout4({ page, nbPanels }: LayoutProps) {
return (
<Grid className="grid-cols-8 grid-rows-8">
<div className="bg-zinc-100 col-start-1 col-end-7 row-start-1 row-end-3">
<Panel
page={page}
nbPanels={nbPanels}
panel={0}
width={512}
height={1024}
/>
</div>
<div className="bg-zinc-100 col-start-3 col-end-9 row-start-3 row-end-4">
<Panel
page={page}
nbPanels={nbPanels}
panel={1}
width={1024}
height={768}
/>
</div>
<div className="bg-stone-100 col-start-2 col-end-8 row-start-4 row-end-6">
<Panel
page={page}
nbPanels={nbPanels}
panel={2}
width={768}
height={1024}
/>
</div>
<div className="bg-slate-100 col-start-1 col-end-9 row-start-6 row-end-8">
<Panel
page={page}
nbPanels={nbPanels}
panel={3}
width={1024}
height={512}
/>
</div>
</Grid>
)
}
// squares + horizontal
export function Layout5({ page, nbPanels }: LayoutProps) {
return (
<Grid className="grid-cols-4 grid-rows-4">
<div className="bg-zinc-100">
<Panel
page={page}
nbPanels={nbPanels}
panel={0}
width={1024}
height={1024}
/>
</div>
<div className="bg-zinc-100">
<Panel
page={page}
nbPanels={nbPanels}
panel={1}
width={1024}
height={1024}
/>
</div>
<div className="bg-stone-100">
<Panel
page={page}
nbPanels={nbPanels}
panel={2}
width={1024}
height={1024}
/>
</div>
<div className="bg-slate-100">
<Panel
page={page}
nbPanels={nbPanels}
panel={3}
width={1024}
height={1024}
/>
</div>
</Grid>
)
}
// export const layouts = { Layout1, Layout2_todo, Layout3_todo, Layout4_todo, Layout2, Layout3 }
export const allLayouts = {
random: <></>,
Layout0,
Layout1,
Layout2,
Layout3,
Layout4
}
export const allLayoutLabels = {
random: "Random layout",
Layout0: "Grid 0",
Layout1: "Grid 1",
Layout2: "Grid 2",
Layout3: "Grid 3",
// Layout4: "Blocks 1",
}
// note for reference: A4 (297mm x 210mm)
export const allLayoutAspectRatios = {
Layout0: "aspect-[250/297]",
Layout1: "aspect-[250/297]",
Layout2: "aspect-[250/297]",
Layout3: "aspect-[250/297]",
// Layout4: "aspect-[1/3]",
}
export const allLayoutsNbPanels = {
// TODO: this is gonna be tricky to implement, but this should be unique / dynamic
Layout0: NB_PANELS_PER_PAGE,
Layout1: NB_PANELS_PER_PAGE,
Layout2: NB_PANELS_PER_PAGE,
Layout3: NB_PANELS_PER_PAGE,
// Layout4: NB_PANELS_PER_PAGE
}
export type LayoutName = keyof typeof allLayouts
export const defaultLayout: LayoutName = "Layout1"
export type LayoutCategory = "square" | "fluid"
export const nonRandomLayouts = Object.keys(allLayouts).filter(layout => layout !== "random")
export const getRandomLayoutName = (): LayoutName => {
return pick(nonRandomLayouts) as LayoutName
}
export function getRandomLayoutNames(): LayoutName[] {
return nonRandomLayouts.sort(() => Math.random() - 0.5) as LayoutName[]
}