import { useState } from 'react' import Head from 'next/head' import { siteConfig } from '@/config/site' import { Layout } from '@/components/layout' import { PreviewAppIcon } from '@/components/ui/preview-app-icon' import Select from 'react-select' import platforms from '@/config/platforms.json' import shapes from '@/config/shapes.json' import colors from '@/config/colors.json' import backgrounds from '@/config/backgrounds.json' function isLimited(limits: { backgrounds?: string[]; colors?: string[] } | undefined, background: string, color: string) { // {{{ if(!limits) { return false } if(limits.backgrounds && !limits.backgrounds.includes(background)) { return true } if(limits.colors && !limits.colors.includes(color)) { return true } return false } // }}} export default function IndexPage() { const [selectedPlaforms, setSelectedPlaforms] = useState([]) const [selectedShapes, setSelectedShapes] = useState(shapes.filter(({ value }) => value === 'paulo22s' || value === 'paulo22sb')) const [selectedColors, setSelectedColors] = useState(colors.filter(({ value }) => value === 'blue1')) const [selectedBackgrounds, setSelectedBackgrounds] = useState(backgrounds.filter(({ value }) => value === 'nobg' || value === 'circle1')) return ( {siteConfig.name}
{ (selectedPlaforms.length == 0 ? platforms : selectedPlaforms).map(({ value: platform }) => { return (selectedShapes.length == 0 ? shapes : selectedShapes).map(({ value: shape, limits }) => { return (selectedColors.length == 0 ? colors : selectedColors).map(({ value: color }) => { return (selectedBackgrounds.length == 0 ? backgrounds : selectedBackgrounds).map(({ value: background }) => { if(isLimited(limits, background, color)) { return null } else { return ( ) } }) }) }) }) }
) }