Updated
This commit is contained in:
parent
4184942584
commit
afb5f3a287
66 changed files with 550 additions and 57 deletions
50
frontend/src/@dasig/components/Background.tsx
Normal file
50
frontend/src/@dasig/components/Background.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
// import '../styles/Background.sass'
|
||||
// import { Show, createSignal } from 'solid-js'
|
||||
// import fs from 'fs'
|
||||
// import webpPath from '../images/background.webp'
|
||||
// import avifPath from '../images/background.avif'
|
||||
// import noBackground from '../images/no-background.webp'
|
||||
|
||||
// interface Props {
|
||||
// image?: boolean
|
||||
// color?: string
|
||||
// }
|
||||
|
||||
// let [imageLoaded, setImageLoaded] = createSignal(false)
|
||||
|
||||
// const checkBackground = () => {
|
||||
// if (!fs.existsSync(avifPath.src) && !fs.existsSync(webpPath.src)) {
|
||||
// setImageLoaded(true)
|
||||
// } else {
|
||||
// setImageLoaded(false)
|
||||
// }
|
||||
// }
|
||||
|
||||
// export default (props: Props) => {
|
||||
// checkBackground()
|
||||
|
||||
// return (
|
||||
// <>
|
||||
// <Show when={props.image}>
|
||||
// <Show when={imageLoaded()}>
|
||||
// <picture class="fullscreen">
|
||||
// <source srcset={avifPath.src} type="image/avif" />
|
||||
// <source srcset={webpPath.src} type="image/webp" />
|
||||
// <source srcset={noBackground.src} type="image/webp" />
|
||||
// <img width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
|
||||
// </picture>
|
||||
// </Show>
|
||||
// <Show when={!imageLoaded()}>
|
||||
// <picture class="fullscreen">
|
||||
// <source srcset={noBackground.src} type="image/webp" />
|
||||
// <img width="1920" height="auto" decoding="async" loading="lazy" alt="An alternative background if found no image background" />
|
||||
// </picture>
|
||||
// </Show>
|
||||
// </Show>
|
||||
|
||||
// <Show when={!props.image}>
|
||||
// <div style={{ background: props.color }} class="fullscreen" />
|
||||
// </Show>
|
||||
// </>
|
||||
// )
|
||||
// }
|
||||
19
frontend/src/@dasig/components/Box.tsx
Normal file
19
frontend/src/@dasig/components/Box.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import '../styles/Box.sass'
|
||||
import { type JSXElement, createMemo } from 'solid-js'
|
||||
|
||||
interface Props {
|
||||
thickness: number
|
||||
color?: string
|
||||
children: JSXElement
|
||||
curved?: boolean
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))
|
||||
|
||||
return (
|
||||
<section class={boxClass()} style={{ border: `${props.thickness}px solid ${props.color || 'white'}` }}>
|
||||
{props.children}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
83
frontend/src/@dasig/components/Button.tsx
Normal file
83
frontend/src/@dasig/components/Button.tsx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import '../styles/Button.sass'
|
||||
import { Show, Switch, Match } from 'solid-js'
|
||||
|
||||
interface Props {
|
||||
label?: string
|
||||
to?: string
|
||||
onClick?: () => void
|
||||
edges?: 'curved' | 'rounded' | 'flat'
|
||||
design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
|
||||
submit?: boolean
|
||||
newtab?: boolean
|
||||
}
|
||||
|
||||
const getBorderRadius = (edge: Props['edges']) => {
|
||||
switch (edge) {
|
||||
case 'curved':
|
||||
return 'border-radius: 6px'
|
||||
case 'rounded':
|
||||
return 'border-radius: 32px'
|
||||
case 'flat':
|
||||
return 'border-radius: 0'
|
||||
default:
|
||||
return 'border-radius: 0'
|
||||
}
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
const borderRadius = getBorderRadius(props.edges)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Show when={props.to}>
|
||||
<Switch>
|
||||
<Match when={props.design}>
|
||||
<a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
|
||||
<button class={props.design} style={borderRadius}>
|
||||
{props.label || 'Click Me!'}
|
||||
</button>
|
||||
</a>
|
||||
</Match>
|
||||
<Match when={!props.design}>
|
||||
<a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
|
||||
<button class="button" style={borderRadius}>
|
||||
{props.label || 'Click Me!'}
|
||||
</button>
|
||||
</a>
|
||||
</Match>
|
||||
</Switch>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.to}>
|
||||
<Switch>
|
||||
<Match when={props.design}>
|
||||
<Show when={props.submit}>
|
||||
<button class={props.design} type="submit" style={borderRadius}>
|
||||
{props.label || 'Click Me!'}
|
||||
</button>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.submit}>
|
||||
<button class={props.design} onClick={props.onClick} style={borderRadius}>
|
||||
{props.label || 'Click Me!'}
|
||||
</button>
|
||||
</Show>
|
||||
</Match>
|
||||
<Match when={!props.design}>
|
||||
<Show when={props.submit}>
|
||||
<button class="button" type="submit" style={borderRadius}>
|
||||
{props.label || 'Click Me!'}
|
||||
</button>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.submit}>
|
||||
<button class="button" onClick={props.onClick} style={borderRadius}>
|
||||
{props.label || 'Click Me!'}
|
||||
</button>
|
||||
</Show>
|
||||
</Match>
|
||||
</Switch>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
}
|
||||
18
frontend/src/@dasig/components/Column.tsx
Normal file
18
frontend/src/@dasig/components/Column.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import '../styles/Column.sass'
|
||||
import type { JSXElement } from 'solid-js'
|
||||
|
||||
interface Props {
|
||||
children: JSXElement
|
||||
content?: 'top' | 'center' | 'right' | 'split' | 'spaced'
|
||||
gap?: number
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
|
||||
{props.children}
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
52
frontend/src/@dasig/components/HTML.tsx
Normal file
52
frontend/src/@dasig/components/HTML.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import '../styles/HTML.sass'
|
||||
import { type JSXElement, Show } from 'solid-js'
|
||||
import background1 from '../images/background.avif'
|
||||
import background2 from '../images/background.webp'
|
||||
|
||||
interface Props {
|
||||
name: string
|
||||
description: string
|
||||
children: JSXElement
|
||||
font?: 'roboto' | 'inter' | 'montserrat' | 'open-sans' | 'public-sans' | string
|
||||
preloadBackground?: boolean
|
||||
author: string
|
||||
assets: JSXElement
|
||||
scripts: JSXElement
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<base href="/" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta name="name" content={props.name} />
|
||||
<meta name="description" content={props.description} />
|
||||
<meta name="title" property="og:title" content={props.name} />
|
||||
<meta name="keywords" content="HTML, CSS, JavaScript" />
|
||||
<meta name="developer" content={props.author} />
|
||||
<meta property="og:description" content={props.description} />
|
||||
<meta property="og:type" content="website" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||
<Show when={props.font}>
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
|
||||
</Show>
|
||||
<Show when={props.preloadBackground}>
|
||||
<link rel="preload" href={background1} as="image" type="image/svg+xml" />
|
||||
<link rel="preload" href={background2} as="image" type="image/svg+xml" />
|
||||
</Show>
|
||||
{props.assets}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class={props.font} id="app">
|
||||
{props.children}
|
||||
</div>
|
||||
{props.scripts}
|
||||
</body>
|
||||
</html>
|
||||
</>
|
||||
)
|
||||
}
|
||||
22
frontend/src/@dasig/components/Page.tsx
Normal file
22
frontend/src/@dasig/components/Page.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import '../styles/Page.sass'
|
||||
import { Show } from 'solid-js'
|
||||
import { Title } from '@solidjs/meta'
|
||||
|
||||
interface Props {
|
||||
children?: any
|
||||
alignment?: 'row' | 'column'
|
||||
title: string
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<Show when={props.alignment}>
|
||||
<main class={props.alignment}><Title>{props.title}</Title>{props.children}</main>
|
||||
</Show>
|
||||
<Show when={!props.alignment}>
|
||||
<main class="page"><Title>{props.title}</Title>{props.children}</main>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue