Compare commits
No commits in common. "236b37f7984d9f0646427d073fa8613e276f2d97" and "ceb65421eb6eb6e7ee129a6b54553ea6ab3fee31" have entirely different histories.
236b37f798
...
ceb65421eb
8 changed files with 210 additions and 54 deletions
|
|
@ -18,6 +18,6 @@
|
||||||
|
|
||||||
<body class="body">
|
<body class="body">
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="./index.tsx"></script>
|
<script type="module" src="/src/layouts/Layout.tsx"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -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(() => <Router>{routes}</Router>, root!)
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import sharp from 'sharp'
|
import sharp from 'sharp'
|
||||||
|
import { Image } from '../index'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
size?: number
|
size?: number
|
||||||
|
|
@ -34,4 +35,11 @@ export default (props: Props) => {
|
||||||
if (props.favicon) {
|
if (props.favicon) {
|
||||||
generateFavicon()
|
generateFavicon()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* <Image avif={avifImage} webp={webpImage} size={props.size}></Image> */}
|
||||||
|
<h1>Hello</h1>
|
||||||
|
</>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
147
src/components/RegistrationForm/RegistrationForm.sass
Normal file
147
src/components/RegistrationForm/RegistrationForm.sass
Normal file
|
|
@ -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)
|
||||||
29
src/components/RegistrationForm/RegistrationForm.tsx
Normal file
29
src/components/RegistrationForm/RegistrationForm.tsx
Normal file
|
|
@ -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 (
|
||||||
|
<>
|
||||||
|
{/* <Form> */}
|
||||||
|
{/* <span>{OPTIONS}</span>
|
||||||
|
<span>{assessorsNameList}</span> */}
|
||||||
|
|
||||||
|
{/* <span>{sample()}</span> */}
|
||||||
|
{/* </Form> */}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -1,14 +1,27 @@
|
||||||
import './Layout.sass'
|
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 {
|
const root = document.getElementById('root')
|
||||||
children: JSXElement
|
|
||||||
}
|
|
||||||
|
|
||||||
export default (props: Props) => {
|
const routes = [
|
||||||
return (
|
{
|
||||||
<>
|
path: '/',
|
||||||
<div class="layout">{props.children}</div>
|
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(() => <Router>{routes}</Router>, root!)
|
||||||
|
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
import { lazy } from 'solid-js'
|
|
||||||
import Layout from '../layouts/Layout.tsx'
|
|
||||||
|
|
||||||
const routes = [
|
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
component: (props: any) => <Layout>{props.children}</Layout>,
|
|
||||||
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: () => <div>404</div>,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
export default routes
|
|
||||||
|
|
@ -24,5 +24,5 @@
|
||||||
"noFallthroughCasesInSwitch": true,
|
"noFallthroughCasesInSwitch": true,
|
||||||
"noUncheckedSideEffectImports": true
|
"noUncheckedSideEffectImports": true
|
||||||
},
|
},
|
||||||
"include": ["src", "index.tsx"]
|
"include": ["src"]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue