better styling and abstraction

2022-12-27 22:27:02 -06:00
parent d299ef727e
commit 8ee6abe99a
6 changed files with 161 additions and 35 deletions
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@@ -0,0 +1,36 @@
+export function SVGRightArrow() {
+    return (
+        <svg viewBox="0 0 1000 1000" height="1rem">
+            <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() {
+    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>
+    )
+}
+
+export function SVGHamburger() {
+    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>
+    )
+}
--- a/src/components/Inputs.tsx
+++ b/src/components/Inputs.tsx
@@ -0,0 +1,76 @@
+import { createRef, InputHTMLAttributes, useState } from "react"
+import { overrideTailwindClasses } from '../general'
+import { SVGEye } from "./Icons"
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    invalid?: boolean
+}
+
+export function InputText({ invalid, ...props }: InputProps) {
+    var inputRef = createRef<HTMLInputElement>()
+    return (
+        <input type="text" ref={inputRef} {...props}
+            className={overrideTailwindClasses(`
+                rounded-full
+                px-3 py-1 mx-2
+                w-64
+                bg-gray-800 focus:bg-gray-700
+                text-gray-400 focus:text-gray-200
+                shadow-glow
+                outline-none shadow-transparent 
+                ${invalid ? "outline-red-600 shadow-red-600" : ""}
+                focus:outline-blue-500 focus:shadow-blue-500
+                transition-all
+            `)} />
+    )
+}
+
+export function InputPassword({ invalid, ...props }: InputProps) {
+    var inputRef = createRef<HTMLInputElement>()
+    var [focused, setFocused] = useState(false)
+    var [showPassword, setShowPassword] = useState(false)
+
+    var toggleShowPassword = () => {
+        setShowPassword(!showPassword)
+        inputRef.current?.focus()
+    }
+
+    return (
+        <span
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            className={overrideTailwindClasses(`
+                flex
+                flex-row
+                rounded-full
+                px-3 py-1 mx-2
+                w-64
+                bg-gray-800
+                shadow-glow
+                outline-none shadow-transparent
+                ${invalid ? "outline-red-600 shadow-red-600" : ""}
+                ${focused ? "outline-blue-500 shadow-blue-500 bg-gray-700" : ""}
+                transition-all
+            `)}>
+            <input type={showPassword ? "text" : "password"}
+                ref={inputRef}
+                {...props}
+                className={`
+                    w-1 flex-grow
+                    bg-transparent
+                    text-gray-400 focus:text-gray-200
+                    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()}>
+                <SVGEye />
+            </span>
+        </span>
+    )
+}