Start creating some UI components

This commit is contained in:
Savanni D'Gerinel 2024-08-19 21:52:17 -04:00
parent 4174847015
commit 793a9c24db
8 changed files with 252 additions and 53 deletions

View File

@ -45,6 +45,7 @@
pkgs.udev
pkgs.wasm-pack
typeshare.packages."x86_64-linux".default
pkgs.nodePackages_latest.typescript-language-server
];
LIBCLANG_PATH="${pkgs.llvmPackages.libclang.lib}/lib";
ENV = "dev";

View File

@ -1,38 +1,80 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
.layout {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
justify-content: space-between;
width: 100%;
}
.App-link {
color: #61dafb;
.palette {
display: flex;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
.palette div {
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 5px;
margin: 1em;
padding: 0;
}
.item-1 {
background-color: var(--purple-1);
}
.item-2 {
background-color: var(--purple-2);
}
.item-3 {
background-color: var(--purple-3);
}
.item-4 {
background-color: var(--purple-4);
}
.item-5 {
background-color: var(--purple-5);
}
.item-6 {
background-color: var(--blue-1);
}
.item-7 {
background-color: var(--blue-2);
}
.item-8 {
background-color: var(--blue-3);
}
.item-9 {
background-color: var(--blue-4);
}
.item-10 {
background-color: var(--blue-5);
}
.item-11 {
background-color: var(--grey-1);
}
.item-12 {
background-color: var(--grey-2);
}
.item-13 {
background-color: var(--grey-3);
}
.item-14 {
background-color: var(--grey-4);
}
.item-15 {
background-color: var(--grey-5);
}

View File

@ -1,26 +1,88 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Card from './components/Card/Card';
import Activator from './components/Activator/Activator';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
const LightThemes = () => <Card name="Light Themes">
<Activator title="Dark reds" activated={false} />
<Activator title="Watery" activated={false} />
<Activator title="Sunset" activated={false} />
<Activator title="Darkness" activated={true} />
</Card>
const LightSetup = () => <div> </div>
interface LightProps {
name: string,
}
const Light = ({ name }: LightProps) => <div> <p> {name} </p> </div>
const Tracks = () => <Card name="Tracks">
<Track name="City BGM" />
<Track name="Chat on the streets" />
<Track name="Abandoned structure" />
<Track name="Water dripping" />
</Card>
interface TrackProps {
name: string,
}
const Track = ({ name }: TrackProps) => <Activator title={name} activated={false} />
const Presets = () => <Card name="Presets">
<Scene name="Gilcrest Falls day" />
<Scene name="Gilcrest Falls night" />
<Scene name="Empty colony" />
<Scene name="Surk colony" />
</Card>
interface PresetProps {
name: string
}
const Scene = ({ name }: PresetProps) => <Activator title={name} activated={false} />
const SceneEditor = () => <div> </div>
const Palette = () => <div className="palette">
<div className="item-1" />
<div className="item-2" />
<div className="item-3" />
<div className="item-4" />
<div className="item-5" />
</div>
const Palette2 = () => <div className="palette">
<div className="item-6" />
<div className="item-7" />
<div className="item-8" />
<div className="item-9" />
<div className="item-10" />
</div>
const Palette3 = () => <div className="palette">
<div className="item-11" />
<div className="item-12" />
<div className="item-13" />
<div className="item-14" />
<div className="item-15" />
</div>
const App = () => {
return (
<div className="app">
<Palette />
<Palette2 />
<Palette3 />
<div className="layout">
<Presets />
<div>
<LightThemes />
<Tracks />
</div>
</div>
</div>
);
}
export default App;

View File

@ -0,0 +1,11 @@
.activator {
border: 1px solid black;
border-radius: 5px;
margin: var(--spacer-m);
padding: var(--spacer-s);
box-shadow: 2px 2px 8px 0px var(--shadow-1);
}
.activator_enabled {
box-shadow: 0px 0px 8px 4px var(--activator-ring);
}

View File

@ -0,0 +1,18 @@
import './Activator.css';
import { PropsWithChildren } from 'react';
interface ActivatorProps {
title: string,
icon?: string,
activated: boolean,
}
const Activator = ({ title, icon, activated, children }: PropsWithChildren<ActivatorProps>) => {
const classnames = activated ? "activator activator_enabled" : "activator";
return (
<div className={classnames}>
<p> {title} </p>
</div>)
}
export default Activator;

View File

@ -0,0 +1,16 @@
.card {
border: 1px solid black;
border-radius: 5px;
margin: var(--spacer-l);
box-shadow: 4px 4px 4px 0px var(--shadow-1),
8px 8px 8px 0px var(--shadow-2);
}
.card__title {
color: var(--title-color);
}
.card__body {
display: flex;
}

View File

@ -0,0 +1,17 @@
import { PropsWithChildren } from 'react';
import './Card.css';
interface CardProps {
name: string,
}
const Card = ({ name, children }: PropsWithChildren<CardProps>) => (
<div className="card">
<h1 className="card__title"> {name} </h1>
<div className="card__body">
{children}
</div>
</div>
)
export default Card;

View File

@ -1,3 +1,34 @@
:root {
--purple-1: hsl(265, 50%, 25%);
--purple-2: hsl(265, 60%, 35%);
--purple-3: hsl(265, 70%, 45%);
--purple-4: hsl(265, 80%, 55%);
--purple-5: hsl(265, 90%, 60%);
--blue-1: hsl(210, 50%, 25%);
--blue-2: hsl(210, 60%, 35%);
--blue-3: hsl(210, 70%, 45%);
--blue-4: hsl(210, 80%, 55%);
--blue-5: hsl(210, 90%, 65%);
--grey-1: hsl(210, 0%, 25%);
--grey-2: hsl(210, 0%, 40%);
--grey-3: hsl(210, 0%, 55%);
--grey-4: hsl(210, 0%, 70%);
--grey-5: hsl(210, 0%, 85%);
--title-color: var(--grey-1);
--shadow-1: var(--purple-1);
--shadow-2: var(--purple-2);
--activator-ring: var(--blue-4);
--spacer-xs: 2px;
--spacer-s: 4px;
--spacer-m: 8px;
--spacer-l: 12px;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@ -5,6 +36,7 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--grey-5);
}
code {