PenaSide/UIKit
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix button types

Browse Source
This commit is contained in:
nflnkr 2023-08-23 13:56:45 +03:00
parent 5e4262ef49
commit 30c5bcc6bd
7 changed files with 117 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
lib/components/AvatarButton.tsx
View File

@ -1,14 +1,21 @@
import { Avatar, IconButton, IconButtonProps, Typography, useTheme } from "@mui/material"; import { Avatar, IconButton, IconButtonProps, Typography, useTheme } from "@mui/material";
import { deepmerge } from "@mui/utils"; import { deepmerge } from "@mui/utils";
import { ForwardRefExoticComponent, RefAttributes } from "react";
import { LinkProps } from "react-router-dom";
export function AvatarButton(props: IconButtonProps) {
type Props = IconButtonProps & {
component?: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
to?: string;
};
export function AvatarButton(props: Props) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<IconButton <IconButton
{...deepmerge({ {...deepmerge({
sx:{ sx: {
height: 36, height: 36,
width: 36, width: 36,
p: 0, p: 0,
@ -19,7 +26,7 @@ export function AvatarButton(props: IconButtonProps) {
backgroundColor: theme.palette.purple.dark, backgroundColor: theme.palette.purple.dark,
color: theme.palette.purple.dark, color: theme.palette.purple.dark,
border: "1px solid black", border: "1px solid black",
}, },
} }
}, props)} }, props)}
> >

43
lib/components/BurgerButton.tsx
View File

@ -1,31 +1,34 @@
import { IconButton, IconButtonProps, SxProps, Theme, useTheme } from "@mui/material"; import { IconButton, IconButtonProps, useTheme } from "@mui/material";
import { ForwardRefExoticComponent, RefAttributes } from "react";
import { LinkProps } from "react-router-dom";
import { deepmerge } from "@mui/utils";
interface Props { type Props = IconButtonProps & {
onClick?: IconButtonProps["onClick"]; component?: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
sx?: SxProps<Theme>; to?: string;
color?: string; };
}
export function BurgerButton({ onClick, sx, color = "white" }: Props) { export function BurgerButton(props: Props) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<IconButton <IconButton
onClick={onClick} {...deepmerge({
sx={{ sx: {
height: 30, height: 30,
width: 30, width: 30,
p: 0, p: 0,
color, color: "black",
"&:hover": { "&:hover": {
color: theme.palette.purple.dark, color: theme.palette.purple.dark,
backgroundColor: "rgb(0 0 0 / 0)",
},
"&:active": {
color: theme.palette.purple.dark,
},
}, },
"&:active": { }, props)}
color: theme.palette.purple.dark,
},
...sx,
}}
> >
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28 8.005H3M28 16.005H3M28 24.005H3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /> <path d="M28 8.005H3M28 16.005H3M28 24.005H3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />

37
lib/components/CloseButton.tsx
View File

@ -1,30 +1,27 @@
import { IconButton, IconButtonProps, SxProps, Theme, useTheme } from "@mui/material"; import { IconButton, IconButtonProps, useTheme } from "@mui/material";
import { deepmerge } from "@mui/utils";
interface Props { export function CloseButton(props: IconButtonProps) {
onClick?: IconButtonProps["onClick"];
sx?: SxProps<Theme>;
}
export function CloseButton({ onClick, sx }: Props) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<IconButton <IconButton
onClick={onClick} {...deepmerge({
sx={{ sx: {
height: 30, height: 30,
width: 30, width: 30,
p: 0, p: 0,
color: "black", color: "black",
"&:hover": { "&:hover": {
color: theme.palette.orange.main, color: theme.palette.orange.main,
backgroundColor: "rgb(0 0 0 / 0)",
},
"&:active": {
color: theme.palette.orange.main,
},
}, },
"&:active": { }, props)}
color: theme.palette.orange.main,
},
...sx,
}}
> >
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 30 31" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 30 31" fill="none">
<path d="m3 3.605 24 24m-24 0 24-24" stroke="currentColor" /> <path d="m3 3.605 24 24m-24 0 24-24" stroke="currentColor" />

37
lib/components/CloseButtonSmall.tsx
View File

@ -1,30 +1,27 @@
import { IconButton, IconButtonProps, SxProps, Theme, useTheme } from "@mui/material"; import { IconButton, IconButtonProps, useTheme } from "@mui/material";
import { deepmerge } from "@mui/utils";
interface Props { export function CloseButtonSmall(props: IconButtonProps) {
onClick?: IconButtonProps["onClick"];
sx?: SxProps<Theme>;
}
export function CloseButtonSmall({ onClick, sx }: Props) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<IconButton <IconButton
onClick={onClick} {...deepmerge({
sx={{ sx: {
height: 12, height: 12,
width: 12, width: 12,
p: 0, p: 0,
color: theme.palette.purple.dark, color: theme.palette.purple.dark,
"&:hover": { "&:hover": {
color: theme.palette.orange.main, color: theme.palette.orange.main,
backgroundColor: "rgb(0 0 0 / 0)",
},
"&:active": {
color: theme.palette.orange.main,
},
}, },
"&:active": { }, props)}
color: theme.palette.orange.main,
},
...sx,
}}
> >
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 14 14" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 14 14" fill="none">
<path d="m13 1.176-12 12M13 13.176l-12-12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> <path d="m13 1.176-12 12M13 13.176l-12-12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />

50
lib/components/WalletButton.tsx
View File

@ -1,35 +1,37 @@
import { IconButton, IconButtonProps, SxProps, Theme, useTheme } from "@mui/material"; import { IconButton, IconButtonProps, useTheme } from "@mui/material";
import { ForwardRefExoticComponent, RefAttributes } from "react";
import { LinkProps } from "react-router-dom";
import { deepmerge } from "@mui/utils";
interface Props { type Props = IconButtonProps & {
onClick?: IconButtonProps["onClick"]; component?: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
sx?: SxProps<Theme>; to?: string;
size?: string | number; };
}
export function WalletButton({ onClick, size = 36, sx }: Props) { export function WalletButton(props: Props) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<IconButton <IconButton
onClick={onClick} {...deepmerge({
sx={{ sx: {
height: size, height: 36,
width: size, width: 36,
p: 0, p: 0,
borderRadius: "6px", borderRadius: "6px",
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.gray.main, color: theme.palette.gray.main,
"&:hover": { "&:hover": {
color: theme.palette.background.default, color: theme.palette.background.default,
backgroundColor: theme.palette.gray.main, backgroundColor: theme.palette.gray.main,
},
"&:active": {
backgroundColor: theme.palette.purple.dark,
color: "white",
},
}, },
"&:active": { }, props)}
backgroundColor: theme.palette.purple.dark,
color: "white",
},
...sx,
}}
> >
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 36 37" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 36 37" fill="none">
<path d="M26.571 16.051v-5c0-.789-.64-1.428-1.428-1.428H9.429c-.79 0-1.429.64-1.429 1.428v14.286c0 .789.64 1.428 1.429 1.428h15.714c.789 0 1.428-.64 1.428-1.428v-5m1.33-5h-7.044a2.857 2.857 0 0 0 0 5.714h7.044a.099.099 0 0 0 .099-.099v-5.516a.1.1 0 0 0-.099-.1Z" stroke="currentColor" strokeWidth="1.5" /> <path d="M26.571 16.051v-5c0-.789-.64-1.428-1.428-1.428H9.429c-.79 0-1.429.64-1.429 1.428v14.286c0 .789.64 1.428 1.429 1.428h15.714c.789 0 1.428-.64 1.428-1.428v-5m1.33-5h-7.044a2.857 2.857 0 0 0 0 5.714h7.044a.099.099 0 0 0 .099-.099v-5.516a.1.1 0 0 0-.099-.1Z" stroke="currentColor" strokeWidth="1.5" />

4
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@frontend/kitui", "name": "@frontend/kitui",
"version": "1.0.33", "version": "1.0.35",
"description": "test", "description": "test",
"main": "./dist/index.js", "main": "./dist/index.js",
"module": "./dist/index.js", "module": "./dist/index.js",
@ -49,6 +49,7 @@
"eslint-plugin-react-refresh": "^0.4.3", "eslint-plugin-react-refresh": "^0.4.3",
"eslint": "^8.45.0", "eslint": "^8.45.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.15.0",
"react-syntax-highlighter": "^15.5.0", "react-syntax-highlighter": "^15.5.0",
"react": "^18.2.0", "react": "^18.2.0",
"typescript": "^5.0.2", "typescript": "^5.0.2",
@ -62,6 +63,7 @@
"@mui/icons-material": "^5.14.3", "@mui/icons-material": "^5.14.3",
"@mui/material": "^5.14.4", "@mui/material": "^5.14.4",
"axios": "^1.4.0", "axios": "^1.4.0",
"react-router-dom": "^6.15.0",
"react": "^18.2.0", "react": "^18.2.0",
"zustand": "^4.3.8" "zustand": "^4.3.8"
} }

20
yarn.lock
View File

@ -681,6 +681,11 @@
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f" resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A== integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
"@remix-run/router@1.8.0":
version "1.8.0"
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.8.0.tgz#e848d2f669f601544df15ce2a313955e4bf0bafc"
integrity sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==
"@rollup/pluginutils@^5.0.2": "@rollup/pluginutils@^5.0.2":
version "5.0.3" version "5.0.3"
resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.3.tgz#183126d69aeb1cfa23401d5a71cb4b8c16c4a4e0" resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.3.tgz#183126d69aeb1cfa23401d5a71cb4b8c16c4a4e0"
@ -2139,6 +2144,21 @@ react-refresh@^0.14.0:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ== integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
react-router-dom@^6.15.0:
version "6.15.0"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.15.0.tgz#6da7db61e56797266fbbef0d5e324d6ac443ee40"
integrity sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ==
dependencies:
"@remix-run/router" "1.8.0"
react-router "6.15.0"
react-router@6.15.0:
version "6.15.0"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.15.0.tgz#bf2cb5a4a7ed57f074d4ea88db0d95033f39cac8"
integrity sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg==
dependencies:
"@remix-run/router" "1.8.0"
react-syntax-highlighter@^15.5.0: react-syntax-highlighter@^15.5.0:
version "15.5.0" version "15.5.0"
resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20" resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"