import './Design.css'
import Launchpad from './components/Launchpad/Launchpad'

const PaletteGrey = () => <div className="palette palette-grey">
    <div className="item-1" />
    <div className="item-2" />
    <div className="item-3" />
    <div className="item-4" />
    <div className="item-5" />
</div>

const PalettePurple = () => <div className="palette palette-purple">
    <div className="item-1" />
    <div className="item-2" />
    <div className="item-3" />
    <div className="item-4" />
    <div className="item-5" />
</div>

const PaletteBlue = () => <div className="palette palette-blue">
    <div className="item-1" />
    <div className="item-2" />
    <div className="item-3" />
    <div className="item-4" />
    <div className="item-5" />
</div>

const Launchpads = () => <div className="design_horizontal">
    <Launchpad
        exclusive={true}
        options={[
            { title: "Grey" },
            { title: "Purple" },
            { title: "Blue" },
        ]}
    />

    <Launchpad
        exclusive={false}
        flow={"vertical"}
        options={[
            { title: "Grey" },
            { title: "Purple" },
            { title: "Blue" },
        ]}
    />
</div>

const Design = () => <div>
    <PaletteGrey />
    <PalettePurple />
    <PaletteBlue />
    <Launchpads />
</div>


export default Design;