Skip to content

Commit 1bf3e3f

Browse files
sajadevosajadevo
committed
add input number
1 parent 94bf21e commit 1bf3e3f

14 files changed

+1660
-0
lines changed

‎docs-content/react/input-number/index.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export * from "./input-zip-code";
2+
export * from "./input-currency";
3+
export * from "./input-credit-card";
4+
export * from "./input-phone-number";
5+
export * from "./input-amount-buttons";
6+
export * from "./input-control-with-icon";
7+
export * from "./input-one-time-password";
8+
export * from "./input-number-with-select";
9+
export * from "./input-currency-conversion";
10+
export * from "./input-counter-plain-buttons";

‎docs-content/react/input-number/input-amount-buttons.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from "react";
2+
import { Input, IconButton, Typography } from "@material-tailwind/react";
3+
4+
export function InputAmountButtons() {
5+
const [value, setValue] = React.useState(0);
6+
7+
return (
8+
<div className="w-80">
9+
<Typography
10+
variant="small"
11+
color="blue-gray"
12+
className="mb-1 font-medium"
13+
>
14+
Select Amount
15+
</Typography>
16+
<div className="relative w-full">
17+
<Input
18+
type="number"
19+
value={value}
20+
onChange={(e) => setValue(Number(e.target.value))}
21+
className="appearance-none !border-t-blue-gray-200 placeholder:text-blue-gray-300 placeholder:opacity-100 focus:!border-t-gray-900 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
22+
labelProps={{
23+
className: "before:content-none after:content-none",
24+
}}
25+
containerProps={{
26+
className: "min-w-0",
27+
}}
28+
/>
29+
<div className="absolute right-1 top-1 flex gap-0.5">
30+
<IconButton
31+
size="sm"
32+
className="rounded"
33+
onClick={() => setValue((cur) => (cur === 0 ? 0 : cur - 1))}
34+
>
35+
<svg
36+
xmlns="http://www.w3.org/2000/svg"
37+
viewBox="0 0 16 16"
38+
fill="currentColor"
39+
className="h-4 w-4"
40+
>
41+
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
42+
</svg>
43+
</IconButton>
44+
<IconButton
45+
size="sm"
46+
className="rounded"
47+
onClick={() => setValue((cur) => cur + 1)}
48+
>
49+
<svg
50+
xmlns="http://www.w3.org/2000/svg"
51+
viewBox="0 0 16 16"
52+
fill="currentColor"
53+
className="h-4 w-4"
54+
>
55+
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
56+
</svg>
57+
</IconButton>
58+
</div>
59+
</div>
60+
<Typography variant="small" color="gray" className="mt-2 font-normal">
61+
Adjust the number using the + and - controls.
62+
</Typography>
63+
</div>
64+
);
65+
}

‎docs-content/react/input-number/input-control-with-icon.tsx

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from "react";
2+
import { Input, IconButton, Typography } from "@material-tailwind/react";
3+
4+
export function InputControlWithIcon() {
5+
const [value, setValue] = React.useState(0);
6+
7+
return (
8+
<div className="w-80">
9+
<Typography
10+
variant="small"
11+
color="blue-gray"
12+
className="mb-1 font-medium"
13+
>
14+
Select Amount
15+
</Typography>
16+
<div className="relative w-full">
17+
<svg
18+
xmlns="http://www.w3.org/2000/svg"
19+
viewBox="0 0 24 24"
20+
fill="currentColor"
21+
className="absolute left-2.5 top-2.5 h-5 w-5 text-slate-600"
22+
>
23+
<path d="M4.5 6.375a4.125 4.125 0 1 1 8.25 0 4.125 4.125 0 0 1-8.25 0ZM14.25 8.625a3.375 3.375 0 1 1 6.75 0 3.375 3.375 0 0 1-6.75 0ZM1.5 19.125a7.125 7.125 0 0 1 14.25 0v.003l-.001.119a.75.75 0 0 1-.363.63 13.067 13.067 0 0 1-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 0 1-.364-.63l-.001-.122ZM17.25 19.128l-.001.144a2.25 2.25 0 0 1-.233.96 10.088 10.088 0 0 0 5.06-1.01.75.75 0 0 0 .42-.643 4.875 4.875 0 0 0-6.957-4.611 8.586 8.586 0 0 1 1.71 5.157v.003Z"></path>
24+
</svg>
25+
<Input
26+
type="number"
27+
value={value}
28+
onChange={(e) => setValue(Number(e.target.value))}
29+
className="appearance-none !border-t-blue-gray-200 pl-10 placeholder:text-blue-gray-300 placeholder:opacity-100 focus:!border-t-gray-900 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
30+
labelProps={{
31+
className: "before:content-none after:content-none",
32+
}}
33+
containerProps={{
34+
className: "min-w-0",
35+
}}
36+
/>
37+
<div className="absolute right-1 top-1 flex gap-0.5">
38+
<IconButton
39+
size="sm"
40+
className="rounded"
41+
onClick={() => setValue((cur) => (cur === 0 ? 0 : cur - 1))}
42+
>
43+
<svg
44+
xmlns="http://www.w3.org/2000/svg"
45+
viewBox="0 0 16 16"
46+
fill="currentColor"
47+
className="h-4 w-4"
48+
>
49+
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
50+
</svg>
51+
</IconButton>
52+
<IconButton
53+
size="sm"
54+
className="rounded"
55+
onClick={() => setValue((cur) => cur + 1)}
56+
>
57+
<svg
58+
xmlns="http://www.w3.org/2000/svg"
59+
viewBox="0 0 16 16"
60+
fill="currentColor"
61+
className="h-4 w-4"
62+
>
63+
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
64+
</svg>
65+
</IconButton>
66+
</div>
67+
</div>
68+
<Typography variant="small" color="gray" className="mt-2 font-normal">
69+
Adjust the number using the + and - controls.
70+
</Typography>
71+
</div>
72+
);
73+
}

‎docs-content/react/input-number/input-counter-plain-buttons.tsx

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from "react";
2+
import { Input, IconButton, Typography } from "@material-tailwind/react";
3+
4+
export function InputCounterPlainButtons() {
5+
const [value, setValue] = React.useState(0);
6+
7+
return (
8+
<div className="w-80">
9+
<Typography
10+
variant="small"
11+
color="blue-gray"
12+
className="mb-1 font-medium"
13+
>
14+
Select Amount
15+
</Typography>
16+
<div className="relative w-full">
17+
<Input
18+
type="number"
19+
value={value}
20+
onChange={(e) => setValue(Number(e.target.value))}
21+
className="appearance-none !border-t-blue-gray-200 placeholder:text-blue-gray-300 placeholder:opacity-100 focus:!border-t-gray-900 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
22+
labelProps={{
23+
className: "before:content-none after:content-none",
24+
}}
25+
containerProps={{
26+
className: "min-w-0",
27+
}}
28+
/>
29+
<div className="absolute right-1 top-1 flex gap-0.5">
30+
<IconButton
31+
size="sm"
32+
variant="text"
33+
className="rounded"
34+
onClick={() => setValue((cur) => (cur === 0 ? 0 : cur - 1))}
35+
>
36+
<svg
37+
xmlns="http://www.w3.org/2000/svg"
38+
viewBox="0 0 16 16"
39+
fill="currentColor"
40+
className="h-4 w-4"
41+
>
42+
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
43+
</svg>
44+
</IconButton>
45+
<IconButton
46+
size="sm"
47+
variant="text"
48+
className="rounded"
49+
onClick={() => setValue((cur) => cur + 1)}
50+
>
51+
<svg
52+
xmlns="http://www.w3.org/2000/svg"
53+
viewBox="0 0 16 16"
54+
fill="currentColor"
55+
className="h-4 w-4"
56+
>
57+
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
58+
</svg>
59+
</IconButton>
60+
</div>
61+
</div>
62+
<Typography variant="small" color="gray" className="mt-2 font-normal">
63+
Adjust the number using the + and - controls.
64+
</Typography>
65+
</div>
66+
);
67+
}

‎docs-content/react/input-number/input-credit-card.tsx

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import React from "react";
2+
import { Input, Typography, Button } from "@material-tailwind/react";
3+
4+
export function InputCreditCard() {
5+
const [cvv, setCvv] = React.useState("");
6+
const [cardNumber, setCardNumber] = React.useState("");
7+
const [expirationDate, setExpirationDate] = React.useState("");
8+
const [cardholderName, setCardholderName] = React.useState("");
9+
return (
10+
<div className="w-full max-w-sm">
11+
<Typography
12+
variant="small"
13+
color="blue-gray"
14+
className="mb-1 block font-medium"
15+
>
16+
Cardholder Name
17+
</Typography>
18+
<Input
19+
placeholder="e.g John Doe"
20+
className="appearance-none !border-t-blue-gray-200 placeholder:text-blue-gray-300 placeholder:opacity-100 focus:!border-t-gray-900 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
21+
labelProps={{
22+
className: "before:content-none after:content-none",
23+
}}
24+
containerProps={{
25+
className: "min-w-0",
26+
}}
27+
value={cardholderName}
28+
onChange={(e) => setCardholderName(e.target.value)}
29+
/>
30+
31+
<Typography
32+
variant="small"
33+
color="blue-gray"
34+
className="mb-1 mt-4 block font-medium"
35+
>
36+
Card Number
37+
</Typography>
38+
<Input
39+
placeholder="1234 5678 9012 3456"
40+
maxLength={19}
41+
className="appearance-none !border-t-blue-gray-200 placeholder:text-blue-gray-300 placeholder:opacity-100 focus:!border-t-gray-900 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
42+
labelProps={{
43+
className: "before:content-none after:content-none",
44+
}}
45+
containerProps={{
46+
className: "min-w-0",
47+
}}
48+
value={cardNumber
49+
.replace(/\s/g, "")
50+
.replace(/(\d{4})/g, "$1 ")
51+
.trim()}
52+
onChange={(e) => setCardNumber(e.target.value)}
53+
/>
54+
55+
<div className="mt-4 flex">
56+
<div className="mr-4 w-full md:w-8/12">
57+
<Typography
58+
variant="small"
59+
color="blue-gray"
60+
className="mb-1 block font-medium"
61+
>
62+
Expiration Date
63+
</Typography>
64+
<Input
65+
placeholder="MM/YY"
66+
maxLength={5}
67+
pattern="\d{2}/\d{2}"
68+
className="appearance-none !border-t-blue-gray-200 placeholder:text-blue-gray-300 placeholder:opacity-100 focus:!border-t-gray-900 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
69+
labelProps={{
70+
className: "before:content-none after:content-none",
71+
}}
72+
containerProps={{
73+
className: "!min-w-0",
74+
}}
75+
value={expirationDate
76+
.replace(/[^0-9]/g, "")
77+
.replace(/(\d{2})(\d{1,2})/, "$1/$2")
78+
.substring(0, 5)}
79+
onChange={(e) => setExpirationDate(e.target.value)}
80+
/>
81+
</div>
82+
<div className="w-full md:w-4/12">
83+
<Typography
84+
variant="small"
85+
color="blue-gray"
86+
className="mb-1 block font-medium"
87+
>
88+
CVV
89+
</Typography>
90+
<Input
91+
placeholder="123"
92+
maxLength={3}
93+
pattern="\d{3}"
94+
className="appearance-none !border-t-blue-gray-200 placeholder:text-blue-gray-300 placeholder:opacity-100 focus:!border-t-gray-900 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
95+
labelProps={{
96+
className: "before:content-none after:content-none",
97+
}}
98+
containerProps={{
99+
className: "!min-w-0",
100+
}}
101+
value={cvv.replace(/[^0-9]/g, "").replace(/(\..*)\./g, "$1")}
102+
onChange={(e) => setCvv(e.target.value)}
103+
/>
104+
</div>
105+
</div>
106+
<Button className="mt-4" fullWidth>
107+
Purchase Now
108+
</Button>
109+
</div>
110+
);
111+
}

0 commit comments

Comments
 (0)