PatAlcala9/ocbo-esign
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added icon for button

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-10-27 11:42:34 +08:00
parent 050f98f296
commit d6dcec01a0
1 changed files with 25 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/Button/Button.tsx
View file

@ -1,6 +1,7 @@
import './Button.sass' import './Button.sass'
import { Show, Switch, Match } from 'solid-js' import { Show, Switch, Match, type JSXElement } from 'solid-js'
import { A } from '@solidjs/router' import { A } from '@solidjs/router'
import { Row } from '../index'
interface Props { interface Props {
label?: string label?: string
@ -12,6 +13,7 @@ interface Props {
newtab?: boolean newtab?: boolean
width?: number width?: number
wide?: boolean wide?: boolean
icon?: (props: { size?: number }) => JSXElement
} }
const getBorderRadius = (edge: Props['edges']) => { const getBorderRadius = (edge: Props['edges']) => {
@ -29,7 +31,7 @@ const getBorderRadius = (edge: Props['edges']) => {
export default (props: Props) => { export default (props: Props) => {
const borderRadius = getBorderRadius(props.edges) const borderRadius = getBorderRadius(props.edges)
const Icon = props.icon
return ( return (
<> <>
<Show when={props.to}> <Show when={props.to}>
@ -37,6 +39,9 @@ export default (props: Props) => {
<Match when={props.design}> <Match when={props.design}>
<A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}> <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
<button class={props.design} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}> <button class={props.design} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
<Show when={props.icon}>
<span>{Icon && <Icon size={24} />}</span>
</Show>
{props.label || 'Click Me!'} {props.label || 'Click Me!'}
</button> </button>
</A> </A>
@ -44,6 +49,9 @@ export default (props: Props) => {
<Match when={!props.design}> <Match when={!props.design}>
<A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}> <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
<button class="button" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}> <button class="button" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
<Show when={props.icon}>
<span>{Icon && <Icon size={24} />}</span>
</Show>
{props.label || 'Click Me!'} {props.label || 'Click Me!'}
</button> </button>
</A> </A>
@ -56,25 +64,39 @@ export default (props: Props) => {
<Match when={props.design}> <Match when={props.design}>
<Show when={props.submit}> <Show when={props.submit}>
<button class={props.design} type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}> <button class={props.design} type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
<Show when={props.icon}>
<span>{Icon && <Icon size={24} />}</span>
</Show>
{props.label || 'Click Me!'} {props.label || 'Click Me!'}
</button> </button>
</Show> </Show>
<Show when={!props.submit}> <Show when={!props.submit}>
<button class={props.design} onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}> <button class={props.design} onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
{props.label || 'Click Me!'} <Row gap={0.5}>
<Show when={props.icon}>
<span>{Icon && <Icon size={24} />}</span>
</Show>
{props.label || 'Click Me!'}
</Row>
</button> </button>
</Show> </Show>
</Match> </Match>
<Match when={!props.design}> <Match when={!props.design}>
<Show when={props.submit}> <Show when={props.submit}>
<button class="button" type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}> <button class="button" type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
<Show when={props.icon}>
<span>{Icon && <Icon size={24} />}</span>
</Show>
{props.label || 'Click Me!'} {props.label || 'Click Me!'}
</button> </button>
</Show> </Show>
<Show when={!props.submit}> <Show when={!props.submit}>
<button class="button" onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}> <button class="button" onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
<Show when={props.icon}>
<span>{Icon && <Icon size={24} />}</span>
</Show>
{props.label || 'Click Me!'} {props.label || 'Click Me!'}
</button> </button>
</Show> </Show>