Kieran/zap.stream
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: refresh

Browse Source
This commit is contained in:
Kieran
2024-02-27 17:51:31 +00:00
parent 364d2c272f
commit f93a398039
75 changed files with 1434 additions and 2476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/element/buttons.tsx Normal file
View File

@ -0,0 +1,31 @@
import { forwardRef } from "react"
import AsyncButton, { AsyncButtonProps } from "./async-button"
import { Icon } from "./icon";
import classNames from "classnames";
export const DefaultButton = forwardRef<HTMLButtonElement, AsyncButtonProps>((props: AsyncButtonProps, ref) => {
return <AsyncButton {...props} className={classNames(props.className, "px-3 py-2 font-semibold rounded-xl bg-white text-black")} ref={ref} />;
});
export const PrimaryButton = forwardRef<HTMLButtonElement, AsyncButtonProps>((props: AsyncButtonProps, ref) => {
return <AsyncButton {...props} className={classNames(props.className, "px-3 py-2 font-semibold rounded-xl bg-primary")} ref={ref} />;
});
export const Layer1Button = forwardRef<HTMLButtonElement, AsyncButtonProps>((props: AsyncButtonProps, ref) => {
return <AsyncButton {...props} className={classNames(props.className, "px-3 py-2 font-semibold rounded-xl bg-layer-1")} ref={ref} />;
});
export const Layer2Button = forwardRef<HTMLButtonElement, AsyncButtonProps>((props: AsyncButtonProps, ref) => {
return <AsyncButton {...props} className={classNames(props.className, "px-3 py-2 font-semibold rounded-xl bg-layer-2")} ref={ref} />;
});
export const Layer3Button = forwardRef<HTMLButtonElement, AsyncButtonProps>((props: AsyncButtonProps, ref) => {
return <AsyncButton {...props} className={classNames(props.className, "px-3 py-2 font-semibold rounded-xl bg-layer-3")} ref={ref} />;
});
export const WarningButton = forwardRef<HTMLButtonElement, AsyncButtonProps>((props: AsyncButtonProps, ref) => {
return <AsyncButton {...props} className={classNames(props.className, "px-3 py-2 font-semibold rounded-xl bg-warning")} ref={ref} />;
});
export const IconButton = forwardRef<HTMLButtonElement, { iconName: string, iconSize?: number } & AsyncButtonProps>(({ iconName, iconSize, ...props }: { iconName: string, iconSize?: number } & AsyncButtonProps, ref) => {
return <AsyncButton {...props} className={classNames(props.className)} ref={ref}>
<Icon name={iconName} size={iconSize} />
</AsyncButton>;
});
export const BorderButton = forwardRef<HTMLButtonElement, AsyncButtonProps>((props: AsyncButtonProps, ref) => {
return <AsyncButton {...props} className={classNames(props.className, "px-3 py-2 font-semibold rounded-xl btn-border")} ref={ref} />;
});