diff --git a/index.html b/index.html index f392686..79f7fef 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,6 @@
- + diff --git a/index.tsx b/index.tsx deleted file mode 100644 index b3b1273..0000000 --- a/index.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { render } from 'solid-js/web' -import { Router } from '@solidjs/router' - -import routes from './src/routers/router' - -const root = document.getElementById('root') - -render(() => {routes}, root!) diff --git a/src/components/Optimizers/OptimizeLogo.tsx b/src/components/Optimizers/OptimizeLogo.tsx index 5dd4a98..763a91c 100644 --- a/src/components/Optimizers/OptimizeLogo.tsx +++ b/src/components/Optimizers/OptimizeLogo.tsx @@ -1,4 +1,5 @@ import sharp from 'sharp' +import { Image } from '../index' interface Props { size?: number @@ -34,4 +35,11 @@ export default (props: Props) => { if (props.favicon) { generateFavicon() } + + return ( + <> + {/* */} +

Hello

+ + ) } diff --git a/src/components/RegistrationForm/RegistrationForm.sass b/src/components/RegistrationForm/RegistrationForm.sass new file mode 100644 index 0000000..6bbc122 --- /dev/null +++ b/src/components/RegistrationForm/RegistrationForm.sass @@ -0,0 +1,147 @@ +.aa + font-size: 5rem + +.combobox__control + display: inline-flex + justify-content: space-between + width: 200px + border-radius: 6px + font-size: 16px + line-height: 1 + outline: none + background-color: white + border: 1px solid hsl(240 6% 90%) + color: hsl(240 4% 16%) + transition: border-color 250ms, color 250ms + + &[data-invalid] + border-color: hsl(0 72% 51%) + color: hsl(0 72% 51%) + + &_multi + width: 100% + min-width: 200px + max-width: 300px + +.combobox__input + appearance: none + display: inline-flex + min-width: 0 + min-height: 40px + padding-left: 16px + font-size: 16px + background: transparent + border-top-left-radius: 6px + border-bottom-left-radius: 6px + outline: none + + &::placeholder + color: hsl(240 4% 46%) + +.combobox__trigger + appearance: none + display: inline-flex + justify-content: center + align-items: center + width: auto + outline: none + border-top-right-radius: 6px + border-bottom-right-radius: 6px + padding: 0 10px + background-color: hsl(240 5% 96%) + border-left: 1px solid hsl(240 6% 90%) + color: hsl(240 4% 16%) + font-size: 16px + line-height: 0 + transition: 250ms background-color + +.combobox__icon + height: 20px + width: 20px + flex: 0 0 20px + +.combobox__description + margin-top: 8px + color: hsl(240 5% 26%) + font-size: 12px + user-select: none + +.combobox__error-message + margin-top: 8px + color: hsl(0 72% 51%) + font-size: 12px + user-select: none + +.combobox__content + background-color: white + border-radius: 6px + border: 1px solid hsl(240 6% 90%) + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) + // transform-origin: var(--kb-combobox-content-transform-origin) + animation: contentHide 250ms ease-in forwards + + &[data-expanded] + animation: contentShow 250ms ease-out + +.combobox__listbox + overflow-y: auto + max-height: 360px + padding: 8px + + &:focus + outline: none + +.combobox__item + font-size: 16px + line-height: 1 + color: hsl(240 4% 16%) + border-radius: 4px + display: flex + align-items: center + justify-content: space-between + height: 32px + padding: 0 8px + position: relative + user-select: none + outline: none + + &[data-disabled] + color: hsl(240 5% 65%) + opacity: 0.5 + pointer-events: none + + &[data-highlighted] + outline: none + background-color: hsl(200 98% 39%) + color: white + +.combobox__section + padding: 8px 0 0 8px + font-size: 14px + line-height: 32px + color: hsl(240 4% 46%) + +.combobox__item-indicator + height: 20px + width: 20px + display: inline-flex + align-items: center + justify-content: center + + @keyframes contentShow + from + opacity: 0 + transform: translateY(-8px) + + to + opacity: 1 + transform: translateY(0) + + @keyframes contentHide + from + opacity: 1 + transform: translateY(0) + + to + opacity: 0 + transform: translateY(-8px) diff --git a/src/components/RegistrationForm/RegistrationForm.tsx b/src/components/RegistrationForm/RegistrationForm.tsx new file mode 100644 index 0000000..b40be09 --- /dev/null +++ b/src/components/RegistrationForm/RegistrationForm.tsx @@ -0,0 +1,29 @@ +import './RegistrationForm.sass' +import { Button, Logo, Link, Box, Page, Form, Row, Column, Image, Display, Padding } from '../../components' +import { ofetch } from 'ofetch' +import { Combobox } from '@kobalte/core/combobox' +import { AiTwotoneCheckCircle } from 'solid-icons/ai' +import { TiArrowSortedDown } from 'solid-icons/ti' +import { createMemo, createSignal, createUniqueId, For, Show } from 'solid-js' + +const OPTIONS = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple'] + +// const api = import.meta.env.BACKEND +// const assessors = await ofetch(api + 'get-list-assessors', { parseResponse: JSON.parse }) +// const assessorsIDList = assessors.result +// const assessorsNameList = assessors.result2 + +// const [sample, setSample] = createSignal('') + +export default () => { + return ( + <> + {/*
*/} + {/* {OPTIONS} + {assessorsNameList} */} + + {/* {sample()} */} + {/*
*/} + + ) +} diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx index 68143a4..46e82d0 100644 --- a/src/layouts/Layout.tsx +++ b/src/layouts/Layout.tsx @@ -1,14 +1,27 @@ import './Layout.sass' -import type { JSXElement } from 'solid-js' +import { lazy } from 'solid-js' +import { render } from 'solid-js/web' +import { Router } from '@solidjs/router' -interface Props { - children: JSXElement -} +const root = document.getElementById('root') -export default (props: Props) => { - return ( - <> -
{props.children}
- - ) -} +const routes = [ + { + path: '/', + component: lazy(() => import('../pages/IndexPage/Index.tsx')), + }, + { + path: '/main', + component: lazy(() => import('../pages/MainPage/Main.tsx')), + }, + { + path: '/register', + component: lazy(() => import('../pages/RegisterPage/Register.tsx')), + }, + { + path: '/login', + component: lazy(() => import('../pages/LoginPage/Login.tsx')), + }, +] + +render(() => {routes}, root!) diff --git a/src/routers/router.tsx b/src/routers/router.tsx deleted file mode 100644 index 4c1f7d1..0000000 --- a/src/routers/router.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { lazy } from 'solid-js' -import Layout from '../layouts/Layout.tsx' - -const routes = [ - { - path: '/', - component: (props: any) => {props.children}, - children: [ - { - path: '/', - component: lazy(() => import('../pages/IndexPage/Index.tsx')), - }, - { - path: '/main', - component: lazy(() => import('../pages/MainPage/Main.tsx')), - }, - { - path: '/register', - component: lazy(() => import('../pages/RegisterPage/Register.tsx')), - }, - { - path: '/login', - component: lazy(() => import('../pages/LoginPage/Login.tsx')), - }, - ], - }, - { - path: '**', - component: () =>
404
, - }, -] - -export default routes diff --git a/tsconfig.app.json b/tsconfig.app.json index da15d3f..5f0a5ca 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -24,5 +24,5 @@ "noFallthroughCasesInSwitch": true, "noUncheckedSideEffectImports": true }, - "include": ["src", "index.tsx"] + "include": ["src"] }