Walidoux
d26b429ee8
BREAKING CHANGES - Refactored `App.tsx` to import `Component` from `solid-js`, and use a new component `TitleBar`. - Added new component `AnimateView` under `src/components/design`, and renamed old `AnimateView` to `Loader`. - Added new component `Button` under `src/components/design`. - Added new component `Image` under `src/components/design`. - Moved old `Image`, `Loader`, and `Button` components under `src/components/design`. - Refactored `Downloader` component to use `Motion` from `@motionone/solid`, moved it under `Downloader` folder, and used it to create a slick hover effect. - Removed `Downloaders/Button`. Notes: - Used `createSignal` instead of `useState` for SolidJS in `Downloaders.tsx`. - Used `type` keyword to explicitly define the type of the component props or objects where it makes the code clearer.
19 lines
515 B
TypeScript
19 lines
515 B
TypeScript
import classNames from 'classnames'
|
|
import type { Component, ComponentProps, JSXElement } from 'solid-js'
|
|
|
|
interface ButtonProps extends ComponentProps<'button'> {
|
|
icon: JSXElement
|
|
value: string
|
|
class?: string
|
|
handler?: () => void
|
|
}
|
|
|
|
export const Button: Component<ButtonProps> = (props) => {
|
|
return (
|
|
<button onClick={props.handler} class={classNames(props.class, 'flex items-center justify-center gap-x-5')}>
|
|
{props.icon}
|
|
<span class='uppercase'>{props.value}</span>
|
|
</button>
|
|
)
|
|
}
|