forked from phc/orario
Prima release
parent
250b8f6830
commit
7736ab5533
@ -0,0 +1,87 @@
|
||||
<svg width="1000" height="500" viewBox="0 0 1000 500" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="80" y="190" width="60" height="120" fill="#1E6733"/>
|
||||
<rect x="160" y="50" width="150" height="60" fill="#1E6733"/>
|
||||
<rect x="140" y="90" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="140" y="200" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="140" y="410" width="10" height="20" fill="#ECC333"/>
|
||||
<rect x="140" y="350" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="240" y="110" width="70" height="10" fill="#ECC333"/>
|
||||
<rect x="250" y="130" width="60" height="130" fill="#1E6733"/>
|
||||
<rect x="340" y="50" width="60" height="120" fill="#1E6733"/>
|
||||
<rect x="340" y="190" width="60" height="120" fill="#1E6733"/>
|
||||
<rect x="590" y="190" width="60" height="120" fill="#1E6733"/>
|
||||
<rect x="690" y="180" width="60" height="120" fill="#1E6733"/>
|
||||
<rect x="690" y="310" width="60" height="140" fill="#1E6733"/>
|
||||
<rect x="690" y="50" width="60" height="120" fill="#1E6733"/>
|
||||
<rect x="590" y="320" width="60" height="130" fill="#1E6733"/>
|
||||
<rect x="590" y="50" width="60" height="130" fill="#1E6733"/>
|
||||
<rect x="420" y="240" width="150" height="60" fill="#1E6733"/>
|
||||
<rect x="340" y="320" width="60" height="130" fill="#1E6733"/>
|
||||
<rect x="240" y="140" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="350" y="170" width="40" height="10" fill="#ECC333"/>
|
||||
<rect x="330" y="330" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="160" y="200" width="80" height="60" fill="#1E6733"/>
|
||||
<rect x="650" y="200" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="750" y="330" width="10" height="60" fill="#ECC333"/>
|
||||
<rect x="800" y="450" width="40" height="10" fill="#ECC333"/>
|
||||
<rect x="850" y="450" width="30" height="10" fill="#ECC333"/>
|
||||
<rect x="750" y="90" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="810" y="110" width="60" height="10" fill="#ECC333"/>
|
||||
<rect x="580" y="330" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="580" y="60" width="10" height="50" fill="#ECC333"/>
|
||||
<rect x="710" y="420" width="20" height="20" fill="#C4C4C4"/>
|
||||
<rect x="710" y="390" width="20" height="20" fill="#C4C4C4"/>
|
||||
<rect x="100" y="280" width="20" height="10" fill="#C4C4C4"/>
|
||||
<rect x="100" y="260" width="20" height="10" fill="#C4C4C4"/>
|
||||
<rect x="110" y="210" width="20" height="20" fill="#C4C4C4"/>
|
||||
<rect x="350" y="430" width="40" height="10" fill="#303030"/>
|
||||
<rect x="350" y="410" width="40" height="10" fill="#303030"/>
|
||||
<rect x="350" y="390" width="40" height="10" fill="#303030"/>
|
||||
<rect x="700" y="70" width="20" height="40" fill="#303030"/>
|
||||
<rect x="700" y="120" width="20" height="40" fill="#303030"/>
|
||||
<rect x="610" y="280" width="20" height="20" fill="#C4C4C4"/>
|
||||
<rect x="600" y="240" width="20" height="20" fill="#C4C4C4"/>
|
||||
<rect x="430" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="430" y="265" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="430" y="280" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="445" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="445" y="265" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="460" y="280" width="40" height="10" fill="#C4C4C4"/>
|
||||
<rect x="475" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="475" y="265" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="505" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="505" y="265" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="520" y="265" width="10" height="15" fill="#C4C4C4"/>
|
||||
<rect x="505" y="280" width="25" height="10" fill="#C4C4C4"/>
|
||||
<rect x="535" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="535" y="265" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="535" y="280" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="445" y="280" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="460" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="460" y="265" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="490" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="490" y="265" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="520" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="550" y="250" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="550" y="265" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="550" y="280" width="10" height="10" fill="#C4C4C4"/>
|
||||
<rect x="620" y="210" width="20" height="20" fill="#C4C4C4"/>
|
||||
<rect x="370" y="70" width="20" height="30" fill="#303030"/>
|
||||
<rect x="370" y="110" width="20" height="30" fill="#303030"/>
|
||||
<rect x="870" y="440" width="40" height="10" transform="rotate(-90 870 440)" fill="#303030"/>
|
||||
<rect x="890" y="440" width="40" height="10" transform="rotate(-90 890 440)" fill="#303030"/>
|
||||
<rect x="810" y="440" width="40" height="10" transform="rotate(-90 810 440)" fill="#303030"/>
|
||||
<rect x="790" y="440" width="40" height="10" transform="rotate(-90 790 440)" fill="#303030"/>
|
||||
<rect x="270" y="100" width="40" height="10" transform="rotate(-90 270 100)" fill="#303030"/>
|
||||
<rect x="290" y="100" width="40" height="10" transform="rotate(-90 290 100)" fill="#303030"/>
|
||||
<rect x="190" y="100" width="40" height="10" transform="rotate(-90 190 100)" fill="#303030"/>
|
||||
<rect x="170" y="100" width="40" height="10" transform="rotate(-90 170 100)" fill="#303030"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M140 60V170C134.477 170 130 174.477 130 180H90C90 174.477 85.5228 170 80 170V60C85.5228 60 90 55.5228 90 50H130C130 55.5228 134.477 60 140 60Z" fill="#1E6733"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M130 320H90C90 325.523 85.5229 330 80 330V440C85.5229 440 90 444.477 90 450H130C130 444.477 134.477 440 140 440V330C134.477 330 130 325.523 130 320Z" fill="#1E6733"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M770 60C775.523 60 780 55.5228 780 50H910C910 55.5228 914.477 60 920 60V100C914.477 100 910 104.477 910 110H780C780 104.477 775.523 100 770 100V60Z" fill="#1E6733"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M770 400C775.523 400 780 395.523 780 390H910C910 395.523 914.477 400 920 400V440C914.477 440 910 444.477 910 450H780C780 444.477 775.523 440 770 440V400Z" fill="#1E6733"/>
|
||||
<rect x="750" y="190" width="10" height="40" fill="#ECC333"/>
|
||||
<rect x="750" y="240" width="10" height="20" fill="#ECC333"/>
|
||||
<rect x="400" y="200" width="10" height="40" fill="#ECC333"/>
|
||||
<rect x="400" y="250" width="10" height="20" fill="#ECC333"/>
|
||||
</svg>
|
After Width: | Height: | Size: 6.1 KiB |
@ -1,19 +1,28 @@
|
||||
import { useRef } from 'preact/hooks'
|
||||
import { useRef, useState } from 'preact/hooks'
|
||||
import { Icon } from './Icon.jsx'
|
||||
|
||||
export const ComboBox = ({ selected, options }) => {
|
||||
let ids = 0
|
||||
|
||||
function generateId() {
|
||||
return 'combo-id-' + ids++
|
||||
}
|
||||
|
||||
export const ComboBox = ({ options, value, setValue }) => {
|
||||
const [uid] = useState(() => generateId())
|
||||
const selectRef = useRef()
|
||||
|
||||
return (
|
||||
<div class="input-combo" onClick={() => selectRef.current?.click()}>
|
||||
<select ref={selectRef}>
|
||||
{options.map(({ label, value }) => (
|
||||
<option value={value} selected={value === selected}>
|
||||
{label}
|
||||
<div class="input-combo">
|
||||
<select ref={selectRef} id={uid} onInput={e => setValue(e.target.value)}>
|
||||
{options.map(option => (
|
||||
<option value={option.value} selected={option.value === value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Icon name="expand_more" />
|
||||
<label class="icon" for={uid}>
|
||||
<Icon name="expand_more" />
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -0,0 +1,16 @@
|
||||
import { withClasses } from '../utils.jsx'
|
||||
|
||||
export const CompoundButton = ({ options, value, setValue }) => {
|
||||
return (
|
||||
<div class="compound">
|
||||
{options.map(option => (
|
||||
<button
|
||||
class={withClasses(['radio', option.value === value && 'selected'])}
|
||||
onClick={() => setValue(option.value)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
@ -1 +1,5 @@
|
||||
export const Icon = ({ name }) => <span class="material-symbols-outlined">{name}</span>
|
||||
export const Icon = ({ name, ...rest }) => (
|
||||
<span class="material-symbols-outlined" {...rest}>
|
||||
{name}
|
||||
</span>
|
||||
)
|
||||
|
@ -0,0 +1,17 @@
|
||||
import { Icon } from './Icon.jsx'
|
||||
|
||||
export const Popup = ({ title, children, onClose }) => {
|
||||
return (
|
||||
<div class="popup-container">
|
||||
<div class="popup">
|
||||
<div class="header">
|
||||
<div class="title">{title}</div>
|
||||
<button class="flat icon" onClick={onClose}>
|
||||
<Icon name="close" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="content">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
@ -0,0 +1,7 @@
|
||||
export const withClasses = classes =>
|
||||
Array.isArray(classes)
|
||||
? classes.filter(e => !!e).join(' ')
|
||||
: Object.entries(classes)
|
||||
.filter(([, value]) => value)
|
||||
.map(([key]) => key)
|
||||
.join(' ')
|
@ -1,10 +1,21 @@
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
import preact from '@preact/preset-vite'
|
||||
import { loadEnv } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
port: 3000,
|
||||
},
|
||||
plugins: [preact()],
|
||||
export default defineConfig(({ mode }) => {
|
||||
console.log(`Build Mode: "${mode}"`)
|
||||
|
||||
const env = loadEnv(mode, process.cwd(), '')
|
||||
|
||||
return {
|
||||
base: mode === 'development' ? '/' : env.BASE_URL,
|
||||
server: {
|
||||
port: 3000,
|
||||
},
|
||||
plugins: [preact()],
|
||||
esbuild: {
|
||||
logOverride: { 'this-is-undefined-in-esm': 'silent' },
|
||||
},
|
||||
}
|
||||
})
|
||||
|
Loading…
Reference in New Issue