From db48b587db362223008dd2c122d8f3fd8062097d Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Wed, 25 Mar 2026 12:09:55 +0800 Subject: [PATCH] Updated --- @dasig/components/Button.astro | 297 ++++++++++++++++++++++++++++ @dasig/components/Button.tsx | 83 -------- @dasig/components/Input.astro | 52 +++++ @dasig/components/Input.tsx | 27 --- @dasig/index.ts | 3 +- @dasig/styles/Button.sass | 224 --------------------- @dasig/styles/Input.sass | 27 --- src/components/Counter.astro | 79 ++++++++ src/components/Counter/Counter.sass | 47 ----- src/components/Counter/Counter.tsx | 30 --- src/components/Input/Input.tsx | 12 -- src/pages/index.astro | 8 +- 12 files changed, 434 insertions(+), 455 deletions(-) create mode 100644 @dasig/components/Button.astro delete mode 100644 @dasig/components/Button.tsx create mode 100644 @dasig/components/Input.astro delete mode 100644 @dasig/components/Input.tsx delete mode 100644 @dasig/styles/Button.sass delete mode 100644 @dasig/styles/Input.sass create mode 100644 src/components/Counter.astro delete mode 100644 src/components/Counter/Counter.sass delete mode 100644 src/components/Counter/Counter.tsx delete mode 100644 src/components/Input/Input.tsx diff --git a/@dasig/components/Button.astro b/@dasig/components/Button.astro new file mode 100644 index 0000000..f76c940 --- /dev/null +++ b/@dasig/components/Button.astro @@ -0,0 +1,297 @@ +--- +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' + } +} + +const { label, to, edges, design, submit, newtab } = Astro.props +const borderRadius = getBorderRadius(edges) +--- + + + +{ + to ? ( + design ? ( + + + + ) : ( + + + + ) + ) : design ? ( + submit ? ( + + ) : ( + + ) + ) : submit ? ( + + ) : ( + + ) +} + + diff --git a/@dasig/components/Button.tsx b/@dasig/components/Button.tsx deleted file mode 100644 index 6ea3901..0000000 --- a/@dasig/components/Button.tsx +++ /dev/null @@ -1,83 +0,0 @@ -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 ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} diff --git a/@dasig/components/Input.astro b/@dasig/components/Input.astro new file mode 100644 index 0000000..7086254 --- /dev/null +++ b/@dasig/components/Input.astro @@ -0,0 +1,52 @@ +--- +interface Props { + placeholder?: string + value?: string + onChange?: (value: string) => void +} + +const { placeholder, value, onChange } = Astro.props + +let inputValue = value + +const handleChange = (event: Event) => { + const target = event.target as HTMLInputElement + const newValue = target.value + setInputValue(newValue) + if (props.onChange) { + props.onChange(newValue) + } +} +--- + + + + diff --git a/@dasig/components/Input.tsx b/@dasig/components/Input.tsx deleted file mode 100644 index 43ada6c..0000000 --- a/@dasig/components/Input.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import '../styles/Input.sass' -import { createSignal } from 'solid-js' - -interface Props { - placeholder?: string - value?: string - onChange?: (value: string) => void -} - -export default (props: Props) => { - const [inputValue, setInputValue] = createSignal(props.value || '') - - const handleChange = (event: Event) => { - const target = event.target as HTMLInputElement - const newValue = target.value - setInputValue(newValue) - if (props.onChange) { - props.onChange(newValue) - } - } - - return ( - <> - - - ) -} diff --git a/@dasig/index.ts b/@dasig/index.ts index cc1ea92..2a62d5c 100644 --- a/@dasig/index.ts +++ b/@dasig/index.ts @@ -1,6 +1,6 @@ export { default as Background } from './components/Background.astro' export { default as Box } from './components/Box.astro' -export { default as Button } from './components/Button' +export { default as Button } from './components/Button.astro' export { default as Column } from './components/Column.astro' export { default as Copyright } from './components/Copyright.astro' export { default as Footer } from './components/Footer.astro' @@ -15,6 +15,7 @@ export { default as Row } from './components/Row.astro' export { default as Display } from './components/Display.astro' export { default as Padding } from './components/Padding.astro' export { default as Modal } from './components/Modal.astro' +export { default as Input } from './components/Input.astro' // export { default as OptimizeBackground } from './Optimizers/OptimizeBackground' // export { default as OptimizeImage } from './Optimizers/OptimizeImage' diff --git a/@dasig/styles/Button.sass b/@dasig/styles/Button.sass deleted file mode 100644 index b350827..0000000 --- a/@dasig/styles/Button.sass +++ /dev/null @@ -1,224 +0,0 @@ -@use '/src/styles/fonts.sass' as fonts -@use 'sass:color' - -$primaryColor: #0075BB - -$bulmaPrimary: rgb(0, 235, 199) -$bulmaPrimaryText: rgb(0, 31, 26) -$bulmaLink: rgb(92, 111, 255) -$bulmaLinkText: rgb(245, 246, 255) -$bulmaInfo: rgb(128, 217, 255) -$bulmaInfoText: rgb(0, 36, 51) -$bulmaSuccess: rgb(91, 205, 154) -$bulmaSuccessText: rgb(10, 31, 21) -$bulmaWarning: rgb(255, 191, 41) -$bulmaWarningText: rgb(41, 29, 0) -$bulmaDanger: rgb(255, 128, 153) -$bulmaDangerText: rgb(26, 0, 5) -$bulmaLight: rgb(255, 255, 255) -$bulmaLightText: rgb(46, 51, 61) -$bulmaDark: rgb(57, 63, 76) -$bulmaDarkText: rgb(243, 244, 246) -$bulmaText: rgb(31, 34, 41) -$bulmaTextText: rgb(235, 236, 240) -$bulmaGhost: rgba(0,0,0,0) -$bulmaGhostText: rgb(66, 88, 255) - -$bootstrapTextLight: rgb(255, 255, 253) -$bootstrapTextDark: rgb(0, 0, 2) -$bootstrapTextLink: rgb(139, 185, 254) -$bootstrapPrimary: rgb(13, 110, 253) -$bootstrapSecondary: rgb(92, 99, 106) -$bootstrapSuccess: rgb(21, 115, 71) -$bootstrapDanger: rgb(187, 45, 59) -$bootstrapWarning: rgb(255, 202, 44) -$bootstrapInfo: rgb(49, 210, 242) -$bootstrapLight: rgb(211, 212, 213) -$bootstrapDark: rgb(33, 37, 41) - -.dasig-button - background-color: $primaryColor - border: none - color: white - padding: 0.5rem 1.25rem - text-align: center - text-decoration: none - display: inline-block - font-size: 1rem - font-weight: 500 - cursor: pointer - transition: all 0.2s ease-out - - &:hover - background-color: color.adjust($primaryColor, $blackness: 20%) - - &:active - transform: scale(0.95) - -.bu-primary - @extend .dasig-button - font-family: fonts.$Inter - background-color: $bulmaPrimary - color: $bulmaPrimaryText - border: none - font-size: 1rem - border-radius: 0.375rem - font-weight: 500 - padding: 0.5rem 1.25rem - height: 2.5rem - - &:hover - background-color: color.adjust($bulmaPrimary, $lightness: 10%) - -.bu-link - @extend .bu-primary - background-color: $bulmaLink - color: $bulmaLinkText - - &:hover - background-color: color.adjust($bulmaLink, $lightness: 5%) - -.bu-info - @extend .bu-primary - background-color: $bulmaInfo - color: $bulmaInfoText - - &:hover - background-color: color.adjust($bulmaInfo, $lightness: 5%) - -.bu-success - @extend .bu-primary - background-color: $bulmaSuccess - color: $bulmaSuccessText - - &:hover - background-color: color.adjust($bulmaSuccess, $lightness: 5%) - -.bu-warning - @extend .bu-primary - background-color: $bulmaWarning - color: $bulmaWarningText - - &:hover - background-color: color.adjust($bulmaWarning, $lightness: 5%) - -.bu-danger - @extend .bu-primary - background-color: $bulmaDanger - color: $bulmaDangerText - - &:hover - background-color: color.adjust($bulmaDanger, $lightness: 5%) - -.bu-light - @extend .bu-primary - background-color: $bulmaLight - color: $bulmaLightText - - &:hover - background-color: color.adjust($bulmaLight, $lightness: 5%) - -.bu-dark - @extend .bu-primary - background-color: $bulmaDark - color: $bulmaDarkText - - &:hover - background-color: color.adjust($bulmaDark, $lightness: 5%) - -.bu-text - @extend .bu-primary - background-color: rgba(0,0,0,0) - color: $bulmaTextText - text-decoration: underline - - &:hover - background-color: hsl(221,14%,14%) - -.bu-ghost - @extend .bu-primary - background-color: $bulmaGhost - color: $bulmaGhostText - - &:hover - background-color: transparent - text-decoration: underline - -.bo-primary - @extend .dasig-button - font-family: 'Segoe UI', fonts.$Roboto - background-color: $bootstrapPrimary - color: $bootstrapTextLight - border: none - font-size: 1rem - border-radius: 0.375rem - font-weight: 400 - padding: 0.5rem 1.25rem - height: 2.5rem - margin: 0.25rem 0.125rem - - &:hover - background-color: color.adjust($bootstrapPrimary, $blackness: 10%) - -.bo-secondary - @extend .bo-primary - background-color: $bootstrapSecondary - - &:hover - background-color: color.adjust($bootstrapSecondary, $blackness: 10%) - -.bo-success - @extend .bo-primary - background-color: $bootstrapSuccess - - &:hover - background-color: color.adjust($bootstrapSuccess, $blackness: 10%) - -.bo-danger - @extend .bo-primary - background-color: $bootstrapDanger - - &:hover - background-color: color.adjust($bootstrapDanger, $blackness: 10%) - -.bo-warning - @extend .bo-primary - background-color: $bootstrapWarning - color: $bootstrapTextDark - - &:hover - background-color: color.adjust($bootstrapWarning, $lightness: 5%) - -.bo-info - @extend .bo-primary - background-color: $bootstrapInfo - color: $bootstrapTextDark - - &:hover - background-color: color.adjust($bootstrapInfo, $lightness: 5%) - -.bo-light - @extend .bo-primary - background-color: $bootstrapLight - color: $bootstrapTextDark - - &:hover - background-color: color.adjust($bootstrapLight, $blackness: 10%) - -.bo-dark - @extend .bo-primary - background-color: $bootstrapDark - // color: $bootstrapTextDark - - &:hover - background-color: color.adjust($bootstrapDark, $lightness: 10%) - -.bo-link - @extend .bo-primary - background-color: transparent - color: $bootstrapTextLink - text-decoration: underline - - &:hover - color: color.adjust($bootstrapTextLink, $lightness: 5%) - background-color: transparent diff --git a/@dasig/styles/Input.sass b/@dasig/styles/Input.sass deleted file mode 100644 index 49d7d13..0000000 --- a/@dasig/styles/Input.sass +++ /dev/null @@ -1,27 +0,0 @@ -.dasig-input - font-size: 1rem - padding: 0.5rem 1rem - width: 100% - border: 2px solid #ccc - border-radius: 4px - outline: none - transition: border-color 0.3s, box-shadow 0.3s - - &:focus - border-color: #3377AC - box-shadow: 0 0 5px rgba(51, 119, 168, 0.3) - - &::placeholder - color: #888 - font-style: italic - - &:disabled - background-color: #f0f0f0 - border-color: #ddd - - &--error - border-color: #ff4d4f - box-shadow: 0 0 5px rgba(255, 77, 79, 0.3) - - &:focus - border-color: #e81123 diff --git a/src/components/Counter.astro b/src/components/Counter.astro new file mode 100644 index 0000000..a23d50f --- /dev/null +++ b/src/components/Counter.astro @@ -0,0 +1,79 @@ +--- +const count = 0 +--- + + + +
+
{count}
+
+ + +
+
+ + diff --git a/src/components/Counter/Counter.sass b/src/components/Counter/Counter.sass deleted file mode 100644 index 5906f01..0000000 --- a/src/components/Counter/Counter.sass +++ /dev/null @@ -1,47 +0,0 @@ -.counter - display: flex - flex-direction: column - align-items: center - gap: 1rem - margin: 2rem - color: white - border: 1px solid rgba(22, 34, 60, 0.5) - padding: 1rem 2rem - border-radius: 16px - background: rgba(134, 152, 217, 0.1) - - &__display - font-size: 1.75rem - font-weight: bold - - &__buttons - display: flex - justify-content: center - gap: 0.25rem - - // &:hover - // background: color.adjust(vars.$primaryColor, $blackness: 20%) - - - &__decrement - width: 2rem - height: 2.25rem - padding: auto - font-size: 1rem - font-weight: bold - cursor: pointer - text-decoration: none - background-color: rgba(86, 14, 14, 0.915) - border-radius: 8px - color: white - border: 1px solid rgba(255,255,255,0.2) - - &:active - transform: scale(0.95) - - &__increment - @extend .counter__decrement - background-color: rgb(14, 42, 86, 0.915) - - &:active - transform: scale(0.95) diff --git a/src/components/Counter/Counter.tsx b/src/components/Counter/Counter.tsx deleted file mode 100644 index e45cf73..0000000 --- a/src/components/Counter/Counter.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import './Counter.sass' -import { createSignal } from 'solid-js' - -let [count, setCount] = createSignal(0) - -const increment = () => { - setCount(count() + 1) -} - -const decrement = () => { - setCount(count() - 1) -} - -export default () => { - return ( - <> -
-
{count()}
-
- - -
-
- - ) -} diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx deleted file mode 100644 index ae89b0c..0000000 --- a/src/components/Input/Input.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import Input from '../../../@dasig/components/Input' -import { createSignal } from 'solid-js' - -const [sample, setSample] = createSignal('') - -export default () => { - return ( - <> - setSample(val)}> - - ) -} diff --git a/src/pages/index.astro b/src/pages/index.astro index d776bee..3836581 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,7 +1,7 @@ --- import Layout from '../layouts/Layout.astro' -import { Logo, Page, Footer, Row, Image, Copyright, Column } from '../../@dasig' -import Counter from '../components/Counter/Counter' +import { Logo, Page, Footer, Row, Image, Copyright, Column, Button } from '../../@dasig' +import Counter from '../components/Counter.astro' import PA1 from '../../@dasig/images/pat-alcala.avif' import PA2 from '../../@dasig/images/pat-alcala.webp' --- @@ -11,8 +11,8 @@ import PA2 from '../../@dasig/images/pat-alcala.webp' -

Dasig - Astro

- +

Dasig - Static

+