Start setting up the button to add things
This commit is contained in:
parent
c868e82877
commit
2836369b3b
|
@ -2,12 +2,12 @@ import { PropsWithChildren } from 'react';
|
|||
import './Card.css';
|
||||
|
||||
interface CardProps {
|
||||
name: string,
|
||||
title: string,
|
||||
}
|
||||
|
||||
const Card = ({ name, children }: PropsWithChildren<CardProps>) => (
|
||||
const Card = ({ title, children }: PropsWithChildren<CardProps>) => (
|
||||
<div className="card">
|
||||
<h1 className="card__title"> {name} </h1>
|
||||
<h1 className="card__title"> {title} </h1>
|
||||
<div className="card__body">
|
||||
{children}
|
||||
</div>
|
||||
|
|
|
@ -1,11 +0,0 @@
|
|||
.activator {
|
||||
border: 1px solid black;
|
||||
border-radius: 5px;
|
||||
margin: var(--spacer-m);
|
||||
padding: var(--spacer-s);
|
||||
box-shadow: var(--shadow-deep);
|
||||
}
|
||||
|
||||
.activator_enabled {
|
||||
box-shadow: var(--activator-ring);
|
||||
}
|
|
@ -1,20 +0,0 @@
|
|||
import './Launcher.css';
|
||||
import React from 'react';
|
||||
|
||||
export interface LauncherProps {
|
||||
title: string,
|
||||
icon?: string,
|
||||
activated?: boolean,
|
||||
onSelected?: (key: string) => void,
|
||||
}
|
||||
|
||||
const Launcher = ({ title, activated = false, onSelected = (key) => {} }: LauncherProps) => {
|
||||
const classnames = activated ? "activator activator_enabled" : "activator";
|
||||
console.log("classnames ", activated, classnames);
|
||||
return (
|
||||
<div className={classnames} onClick={() => onSelected(title)}>
|
||||
<p> {title} </p>
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default Launcher;
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import './Launchpad.css';
|
||||
import Launcher, { LauncherProps } from '../Launcher/Launcher';
|
||||
import { LaunchpadButton, LaunchpadButtonProps, EditPadButton } from '../LaunchpadButton/types';
|
||||
|
||||
export interface Selectable {
|
||||
onSelected?: (key: string) => void;
|
||||
|
@ -12,7 +12,7 @@ interface LaunchpadProps {
|
|||
title?: string;
|
||||
exclusive: boolean;
|
||||
flow?: Flow;
|
||||
options: Array<LauncherProps>;
|
||||
options: Array<LaunchpadButtonProps>;
|
||||
}
|
||||
|
||||
const exclusiveSelect = (state: { [key: string]: boolean }, targetId: string) => {
|
||||
|
@ -32,13 +32,14 @@ const Launchpad = ({ title, flow = "horizontal", options, exclusive }: Launchpad
|
|||
const [selected, dispatch] = React.useReducer(exclusive ? exclusiveSelect : multiSelect, {});
|
||||
|
||||
let tiedOptions = options.map(option =>
|
||||
<Launcher key={option.title} title={option.title} onSelected={(key: string) => dispatch(key)} activated={selected[option.title]} />
|
||||
<LaunchpadButton key={option.title} title={option.title} onSelected={(key: string) => dispatch(key)} activated={selected[option.title]} />
|
||||
);
|
||||
|
||||
return (<div className="launchpad">
|
||||
{title && <h1 className="launchpad__title"> {title} </h1>}
|
||||
<div className={flow === "horizontal" ? "launchpad_horizontal-flow" : "launchpad_vertical-flow"}>
|
||||
{tiedOptions}
|
||||
<EditPadButton text="Add" />
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
|
|
|
@ -0,0 +1,18 @@
|
|||
.launchpad-button {
|
||||
border: 1px solid black;
|
||||
border-radius: var(--border-radius);
|
||||
margin: var(--spacer-m);
|
||||
padding: var(--spacer-s);
|
||||
box-shadow: var(--shadow-deep);
|
||||
}
|
||||
|
||||
.launchpad-button_enabled {
|
||||
box-shadow: var(--activator-ring);
|
||||
}
|
||||
|
||||
.edit-pad-button {
|
||||
border: var(--border-faint);
|
||||
border-radius: var(--border-radius);
|
||||
margin: var(--spacer-m);
|
||||
padding: var(--spacer-s);
|
||||
}
|
|
@ -0,0 +1,28 @@
|
|||
import './styles.css';
|
||||
import React from 'react';
|
||||
|
||||
export interface LaunchpadButtonProps {
|
||||
title: string,
|
||||
icon?: string,
|
||||
activated?: boolean,
|
||||
onSelected?: (key: string) => void,
|
||||
}
|
||||
|
||||
export const LaunchpadButton = ({ title, activated = false, onSelected = (key) => { } }: LaunchpadButtonProps) => {
|
||||
const classnames = activated ? "launchpad-button launchpad-button_enabled" : "launchpad-button";
|
||||
return (
|
||||
<div className={classnames} onClick={() => onSelected(title)}>
|
||||
<p> {title} </p>
|
||||
</div>)
|
||||
}
|
||||
|
||||
export interface EditPadButtonProps {
|
||||
text: string,
|
||||
onSelected?: () => void,
|
||||
}
|
||||
|
||||
export const EditPadButton = ({ text, onSelected = () => { } }: EditPadButtonProps) => (
|
||||
<div className="edit-pad-button" onClick={() => onSelected()}>
|
||||
<p> {text} </p>
|
||||
</div>)
|
||||
|
|
@ -20,6 +20,7 @@
|
|||
--title-color: var(--grey-1);
|
||||
|
||||
--border: 1px solid var(--purple-1);
|
||||
--border-faint: 1px solid var(--grey-4);
|
||||
--activator-ring: 0px 0px 8px 4px var(--blue-4);
|
||||
--shadow-depression: inset 1px 1px 2px 0px var(--purple-1);
|
||||
--shadow-shallow: 1px 1px 2px 0px var(--purple-1);
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
import './index.css';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import Dashboard from './Dashboard';
|
||||
import Setup from './pages/Setup';
|
||||
import Design from './Design';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
|
||||
|
@ -14,6 +15,10 @@ const router = createBrowserRouter([
|
|||
path: "/",
|
||||
element: <Dashboard />,
|
||||
},
|
||||
{
|
||||
path: "/setup",
|
||||
element: <Setup />,
|
||||
},
|
||||
{
|
||||
path: "/design",
|
||||
element: <Design />,
|
||||
|
|
|
@ -0,0 +1,15 @@
|
|||
import './Setup.css'
|
||||
import Card from '../components/Card/Card';
|
||||
|
||||
const Setup = () => (<div>
|
||||
<h1> Setup </h1>
|
||||
|
||||
<Card title="Scenes" />
|
||||
<Card title="Lights">
|
||||
<p> Connect to nearby light systems </p>
|
||||
</Card>
|
||||
<Card title="Sounds">
|
||||
</Card>
|
||||
</div>)
|
||||
|
||||
export default Setup;
|
Loading…
Reference in New Issue