devx.network/app/components/TextInput.tsx at 97999da820313ba392ecf454831057497772f03c · DEVxNetwork/devx.network · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
"use client"
import styled from "styled-components"
import { forwardRef } from "react"

// Types //

type BaseInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">

interface TextInputProps extends BaseInputProps {
	variant?: "primary" | "secondary"
	size?: "small" | "default"
	error?: boolean
}

// Components //

export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
	({ variant = "secondary", size = "small", error = false, ...props }, ref) => {
		return <StyledInput ref={ref} $variant={variant} $size={size} $error={error} {...props} />
	}
)

TextInput.displayName = "TextInput"

// Styled Components //

const StyledInput = styled.input<{
	$variant: "primary" | "secondary"
	$size: "small" | "default"
	$error?: boolean
}>`
	padding: ${(props) => (props.$size === "small" ? "0.5rem 1rem" : "0.75rem 1.5rem")};
	border-radius: 0.25rem;
	font-weight: ${(props) => (props.$size === "small" ? "500" : "600")};
	font-size: ${(props) => (props.$size === "small" ? "inherit" : "1.1rem")};
	font-family: inherit;
	line-height: 1.5;
	transition: all 0.2s ease;
	width: 100%;
	box-sizing: border-box;
	background-color: ${(props) => (props.$variant === "primary" ? "white" : "transparent")};
	color: ${(props) => (props.$variant === "primary" ? "black" : "white")};
	border: ${(props) => {
		if (props.$error) {
			return "1px solid var(--error-color)"
		}

		if (props.$variant === "secondary") {
			return "1px solid rgba(255, 255, 255, 0.3)"
		}

		return "1px solid rgba(0, 0, 0, 0.2)"
	}};

	&:focus {
		outline: none;
		border-color: ${(props) => {
			if (props.$error) {
				return "var(--error-color)"
			}

			if (props.$variant === "secondary") {
				return "white"
			}

			return "rgba(0, 0, 0, 0.4)"
		}};
		background-color: ${(props) =>
			props.$variant === "primary" ? "white" : "rgba(255, 255, 255, 0.05)"};
	}

	&::placeholder {
		color: ${(props) =>
			props.$variant === "primary" ? "rgba(0, 0, 0, 0.5)" : "rgba(255, 255, 255, 0.5)"};
	}

	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
`