zomo/discord-retokenizer-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

bots page

Browse Source
This commit is contained in:
ashley zomo
2022-12-28 01:35:43 -06:00
parent 77f6472679
commit a42d9e6442
9 changed files with 309 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/Icons.tsx
View File

@@ -1,36 +1,45 @@
export function SVGRightArrow() {
export interface IconProps {
height?: string
}
export function SVGRightArrow({ height = "1rem" }: IconProps) {
return (
<svg viewBox="0 0 1000 1000" height="1rem">
<svg viewBox="0 0 1000 1000" height={height}>
<path d="M619.5,899.5l350-350c27.3-27.3,27.3-71.7,0-99l-350-350c-27.3-27.3-71.7-27.3-99,0c-27.3,27.3-27.3,71.7,0,99L751,430H80c-38.7,0-70,31.3-70,70c0,38.7,31.3,70,70,70h671L520.5,800.5C506.8,814.2,500,832.1,500,850c0,17.9,6.8,35.8,20.5,49.5C547.8,926.8,592.2,926.8,619.5,899.5z" />
</svg>
)
}
export function SVGEye() {
export function SVGEye({ height = "1.5rem" }: IconProps) {
return (
<svg height="1.5rem" viewBox="0 0 128 128">
<g transform="matrix(1.75,0,0,1.75,-66.6667,-17.3333)">
<path d="M74.667,40.381C81.815,40.381 87.619,46.185 87.619,53.333C87.619,60.482 81.815,66.286 74.667,66.286C67.518,66.286 61.714,60.482 61.714,53.333C61.714,46.185 67.518,40.381 74.667,40.381ZM74.667,44.952C70.041,44.952 66.286,48.708 66.286,53.333C66.286,57.959 70.041,61.714 74.667,61.714C79.292,61.714 83.048,57.959 83.048,53.333C83.048,48.708 79.292,44.952 74.667,44.952Z" />
</g>
<g transform="matrix(1,0,0,1,0,12)">
<path d="M13.524,46.564C11.979,48.141 9.445,48.167 7.868,46.623C6.291,45.078 6.264,42.543 7.809,40.966C22.092,26.385 41.997,17.333 64,17.333C86.003,17.333 105.908,26.385 120.191,40.966C121.736,42.543 121.709,45.078 120.132,46.623C118.555,48.167 116.021,48.141 114.476,46.564C101.646,33.466 83.765,25.333 64,25.333C44.235,25.333 26.354,33.466 13.524,46.564Z" />
</g>
<svg viewBox="0 0 128 128" height={height}>
<path d="M64 53.333c12.51 0 22.667 10.157 22.667 22.666C86.667 88.51 76.51 98.667 64 98.667 51.49 98.667 41.333 88.51 41.333 76 41.333 63.49 51.49 53.333 64 53.333Zm0 8c-8.095 0-14.666 6.573-14.666 14.666 0 8.096 6.571 14.667 14.667 14.667 8.093 0 14.666-6.571 14.666-14.667 0-8.093-6.573-14.666-14.666-14.666Z" /><path d="M13.524 58.564a4.002 4.002 0 0 1-5.656.059 4.002 4.002 0 0 1-.059-5.657C22.092 38.385 41.997 29.333 64 29.333s41.908 9.052 56.191 23.633a4.002 4.002 0 0 1-.059 5.657 4.002 4.002 0 0 1-5.656-.059C101.646 45.466 83.765 37.333 64 37.333s-37.646 8.133-50.476 21.231Z" />
</svg>
)
}
export function SVGHamburger() {
export function SVGHamburger({ height = "1.5em" }: IconProps) {
return (
<svg height="1.5em" viewBox="0 0 3000 3000">
<g transform="matrix(1.50981,0,0,1.2859,-338.198,86.7981)">
<path d="M2211,435.5C2211,349.677 2151.66,280 2078.56,280L356.438,280C283.344,280 224,349.677 224,435.5C224,521.323 283.344,591 356.438,591L2078.56,591C2151.66,591 2211,521.323 2211,435.5Z" />
</g>
<g transform="matrix(1.50981,0,0,1.2859,-338.198,939.991)">
<path d="M2211,435.5C2211,349.677 2151.66,280 2078.56,280L356.438,280C283.344,280 224,349.677 224,435.5C224,521.323 283.344,591 356.438,591L2078.56,591C2151.66,591 2211,521.323 2211,435.5Z" />
</g>
<g transform="matrix(-1.50981,1.84899e-16,-1.57477e-16,-1.2859,3338.2,2913.2)">
<path d="M2211,435.5C2211,349.677 2151.66,280 2078.56,280L356.438,280C283.344,280 224,349.677 224,435.5C224,521.323 283.344,591 356.438,591L2078.56,591C2151.66,591 2211,521.323 2211,435.5Z" />
</g>
<svg viewBox="0 0 3000 3000" height={height}>
<path d="M2999.992 646.808c0-110.36-89.592-199.958-199.96-199.958H199.957C89.598 446.85-.001 536.448-.001 646.808s89.599 199.957 199.957 199.957h2600.077c110.367 0 199.959-89.598 199.959-199.957ZM2999.992 1500c0-110.36-89.592-199.957-199.96-199.957H199.957C89.598 1300.043-.001 1389.641-.001 1500c0 110.36 89.599 199.958 199.957 199.958h2600.077c110.367 0 199.959-89.598 199.959-199.958ZM.01 2353.19c0 110.36 89.592 199.958 199.96 199.958h2600.076c110.358 0 199.957-89.598 199.957-199.957 0-110.36-89.599-199.958-199.957-199.958H199.97C89.602 2153.233.01 2242.831.01 2353.191Z" />
</svg>
)
}
export function SVGPlus({ height = "2em" }: IconProps) {
return (
<svg viewBox="0 0 128 128" height={height}>
<path d="M10.667,74C5.148,74 0.667,69.519 0.667,64C0.667,58.481 5.148,54 10.667,54L117.333,54C122.852,54 127.333,58.481 127.333,64C127.333,69.519 122.852,74 117.333,74L10.667,74Z" />
<path d="M54,10.667C54,5.148 58.481,0.667 64,0.667C69.519,0.667 74,5.148 74,10.667L74,117.333C74,122.852 69.519,127.333 64,127.333C58.481,127.333 54,122.852 54,117.333L54,10.667Z" />
</svg>
)
}
export function SVGx({ height = "2em" }: IconProps) {
return (
<svg viewBox="0 0 128 128" height={height}>
<path d="M8.882 23.024c-3.903-3.903-3.903-10.24 0-14.142 3.903-3.903 10.24-3.903 14.142 0l96.094 96.094c3.903 3.903 3.903 10.24 0 14.142-3.903 3.903-10.24 3.903-14.142 0L8.882 23.024Z" />
<path d="M104.976 8.882c3.903-3.903 10.24-3.903 14.142 0 3.903 3.902 3.903 10.24 0 14.142l-96.094 96.094c-3.903 3.903-10.24 3.903-14.142 0-3.903-3.903-3.903-10.24 0-14.142l96.094-96.094Z" />
</svg>
)
}

67
src/components/Inputs.tsx
View File

@@ -3,31 +3,39 @@ import { overrideTailwindClasses } from '../general'
import { SVGEye } from "./Icons"
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
altColor?: boolean
invalid?: boolean
}
export function InputText({ invalid, ...props }: InputProps) {
var inputRef = createRef<HTMLInputElement>()
export function InputText({ invalid, altColor, className, ...props }: InputProps) {
return (
<input type="text" ref={inputRef} {...props}
<input type="text" {...props}
className={overrideTailwindClasses(`
inline-block
rounded-full
px-3 py-1 mx-2
w-64
bg-gray-800 focus:bg-gray-700
text-gray-400 focus:text-gray-200
${!altColor ? `
bg-gray-800 focus:bg-gray-700
text-gray-400 focus:text-gray-200
` : `
bg-gray-700 focus:bg-gray-600
text-gray-300 focus:text-gray-100
`}
shadow-glow
outline-none shadow-transparent
${invalid ? "outline-red-600 shadow-red-600" : ""}
focus:outline-blue-500 focus:shadow-blue-500
transition-all
${className ?? ""}
`)} />
)
}
export function InputPassword({ invalid, ...props }: InputProps) {
export function InputPassword({ invalid, altColor, className, ...props }: InputProps) {
var inputRef = createRef<HTMLInputElement>()
var [focused, setFocused] = useState(false)
var [interacting, setInteracting] = useState(false)
var [showPassword, setShowPassword] = useState(false)
var toggleShowPassword = () => {
@@ -40,55 +48,64 @@ export function InputPassword({ invalid, ...props }: InputProps) {
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
className={overrideTailwindClasses(`
flex
inline-flex
flex-row
rounded-full
px-3 py-1 mx-2
w-64
bg-gray-800
${!altColor ? "bg-gray-800" : "bg-gray-700"}
shadow-glow
outline-none shadow-transparent
${invalid ? "outline-red-600 shadow-red-600" : ""}
${focused ? "outline-blue-500 shadow-blue-500 bg-gray-700" : ""}
${focused || interacting ? `outline-blue-500 shadow-blue-500 ${!altColor ? "bg-gray-800" : "bg-gray-600"}` : ""}
transition-all
${className ?? ""}
`)}>
<input type={showPassword ? "text" : "password"}
ref={inputRef}
{...props}
className={`
className={overrideTailwindClasses(`
w-1 flex-grow
bg-transparent
text-gray-400 focus:text-gray-200
${!altColor ? "text-gray-400" : "text-gray-300"}
${focused || interacting ? `${!altColor ? "text-gray-200" : "text-gray-100"}` : ""}
outline-none
`} />
<span className={overrideTailwindClasses(`
h-full
pl-2
border-l border-gray-600
${focused ? "opacity-100" : "opacity-0"}
transition-all
${showPassword ? "fill-blue-500" : "fill-gray-400"}
`)} onClick={() => toggleShowPassword()}>
`)} />
<span
className={overrideTailwindClasses(`
h-full
pl-2
border-l ${!altColor ? "border-gray-600" : "border-gray-500"}
${focused || interacting ? "opacity-100" : "opacity-0"}
transition-all
${showPassword ? (!altColor ? "fill-blue-500" : "fill-blue-400") : (!altColor ? "fill-gray-400" : "fill-gray-300")}
`)}
onClick={() => toggleShowPassword()}
onMouseDown={() => setInteracting(true)}
onMouseUp={() => setInteracting(false)}>
<SVGEye />
</span>
</span>
)
}
interface ButtonProps extends HTMLAttributes<HTMLButtonElement> { }
interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
icon?: boolean
}
export function Button({ children, ...props }: ButtonProps) {
export function Button({ children, icon, className, ...props }: ButtonProps) {
return (
<button className={`
<button className={overrideTailwindClasses(`
rounded-full outline-none
bg-gray-800 focus:bg-gray-700
hover:bg-gray-700 active:bg-gray-800
fill-gray-400 focus:fill-gray-200
px-3 py-2
px-3 py-1 mx-2
shadow-glow shadow-transparent
focus:outline-blue-500 focus:shadow-blue-500
transition-all
`}
${className ?? ""}
`)}
{...props}>
{children}
</button>