Skip to content

Commit 47a4ae0

Browse files
sajadevosajadevo
committed
update the components
1 parent 1bf3e3f commit 47a4ae0

11 files changed

+715
-0
lines changed

‎docs-content/react/input-phone/index.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export * from "./input-simple-phone";
2+
export * from "./input-phone-with-icon";
3+
export * from "./input-phone-with-auth";
4+
export * from "./input-phone-validation";
5+
export * from "./input-phone-with-select";
6+
export * from "./input-phone-country-code";
7+
export * from "./input-phone-floating-label";

‎docs-content/react/input-phone/input-phone-country-code.tsx

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from "react";
2+
import {
3+
Input,
4+
Menu,
5+
MenuHandler,
6+
MenuList,
7+
MenuItem,
8+
Button,
9+
Typography,
10+
} from "@material-tailwind/react";
11+
12+
const COUNTRIES = ["France (+33)", "Germany (+49)", "Spain (+34)", "USA (+1)"];
13+
const CODES = ["+33", "+49", "+34", "+1"];
14+
15+
export function InputPhoneCountryCode() {
16+
const [country, setCountry] = React.useState(0);
17+
18+
return (
19+
<div className="w-full max-w-[24rem]">
20+
<Typography
21+
variant="small"
22+
color="blue-gray"
23+
className="mb-1 font-medium"
24+
>
25+
Enter Phone Number
26+
</Typography>
27+
<div className="relative flex w-full">
28+
<Menu placement="bottom-start">
29+
<MenuHandler>
30+
<Button
31+
ripple={false}
32+
variant="text"
33+
color="blue-gray"
34+
className="h-10 w-14 shrink-0 rounded-r-none border border-r-0 border-blue-gray-200 bg-transparent px-3"
35+
>
36+
{CODES[country]}
37+
</Button>
38+
</MenuHandler>
39+
<MenuList className="max-h-[20rem] max-w-[18rem]">
40+
{COUNTRIES.map((country, index) => {
41+
return (
42+
<MenuItem
43+
key={country}
44+
value={country}
45+
onClick={() => setCountry(index)}
46+
>
47+
{country}
48+
</MenuItem>
49+
);
50+
})}
51+
</MenuList>
52+
</Menu>
53+
<Input
54+
type="tel"
55+
pattern="[0-9]*"
56+
inputMode="numeric"
57+
maxLength={12}
58+
placeholder="324-456-2323"
59+
className="appearance-none rounded-l-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"
60+
labelProps={{
61+
className: "before:content-none after:content-none",
62+
}}
63+
containerProps={{
64+
className: "min-w-0",
65+
}}
66+
/>
67+
</div>
68+
</div>
69+
);
70+
}

‎docs-content/react/input-phone/input-phone-floating-label.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Input, Typography } from "@material-tailwind/react";
2+
3+
export function InputPhoneFloatingLabel() {
4+
return (
5+
<div className="w-96">
6+
<Input
7+
maxLength={16}
8+
label="Contact Number"
9+
placeholder="e.g., +1 123-456-7890"
10+
pattern="^\+\d{1,3}\s\d{1,4}-\d{1,4}-\d{4}$"
11+
className="appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
12+
icon={
13+
<svg
14+
xmlns="http://www.w3.org/2000/svg"
15+
viewBox="0 0 24 24"
16+
fill="currentColor"
17+
className="h-4 w-4 text-blue-gray-600"
18+
>
19+
<path
20+
fill-rule="evenodd"
21+
d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z"
22+
clip-rule="evenodd"
23+
/>
24+
</svg>
25+
}
26+
/>
27+
</div>
28+
);
29+
}

‎docs-content/react/input-phone/input-phone-validation.tsx

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { Input, Typography } from "@material-tailwind/react";
2+
3+
export function InputPhoneValidation() {
4+
return (
5+
<div className="space-y-8">
6+
<div className="w-96">
7+
<Typography
8+
variant="small"
9+
color="blue-gray"
10+
className="mb-1 font-medium"
11+
>
12+
Contact Number
13+
</Typography>
14+
<Input
15+
success={true}
16+
maxLength={16}
17+
placeholder="e.g., +1 123-456-7890"
18+
pattern="^\+\d{1,3}\s\d{1,4}-\d{1,4}-\d{4}$"
19+
className="appearance-none !border-t-green-500 placeholder:text-green-300 placeholder:opacity-100 focus:!border-t-green-500 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
20+
labelProps={{
21+
className: "before:content-none after:content-none",
22+
}}
23+
/>
24+
<Typography color="green" className="mt-2 text-xs font-normal">
25+
Great! Your phone number is valid.
26+
</Typography>
27+
</div>
28+
<div className="w-96">
29+
<Typography
30+
variant="small"
31+
color="blue-gray"
32+
className="mb-1 font-medium"
33+
>
34+
Contact Number
35+
</Typography>
36+
<Input
37+
error={true}
38+
maxLength={16}
39+
placeholder="e.g., +1 123-456-7890"
40+
pattern="^\+\d{1,3}\s\d{1,4}-\d{1,4}-\d{4}$"
41+
className="appearance-none !border-t-red-500 placeholder:text-red-300 placeholder:opacity-100 focus:!border-t-red-500 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
42+
labelProps={{
43+
className: "before:content-none after:content-none",
44+
}}
45+
/>
46+
<Typography
47+
color="red"
48+
className="mt-2 flex items-center gap-2 text-xs font-normal"
49+
>
50+
<svg
51+
xmlns="http://www.w3.org/2000/svg"
52+
viewBox="0 0 24 24"
53+
fill="currentColor"
54+
className="h-5 w-5"
55+
>
56+
<path
57+
fill-rule="evenodd"
58+
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z"
59+
clip-rule="evenodd"
60+
></path>
61+
</svg>
62+
Please match the requested format. e.g., +1 123-456-7890
63+
</Typography>
64+
</div>
65+
</div>
66+
);
67+
}

‎docs-content/react/input-phone/input-phone-with-auth.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Input, Typography, Button } from "@material-tailwind/react";
2+
3+
export function InputPhoneWithAuth() {
4+
return (
5+
<div className="w-96">
6+
<Typography
7+
variant="small"
8+
color="blue-gray"
9+
className="mb-1 font-medium"
10+
>
11+
Contact Number
12+
</Typography>
13+
<Input
14+
maxLength={16}
15+
placeholder="e.g., +1 123-456-7890"
16+
pattern="^\+\d{1,3}\s\d{1,4}-\d{1,4}-\d{4}$"
17+
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"
18+
labelProps={{
19+
className: "before:content-none after:content-none",
20+
}}
21+
/>
22+
<Button className="mt-4" fullWidth>
23+
Continue
24+
</Button>
25+
<div className="my-4 flex items-center gap-2">
26+
<span className="h-[1px] w-1/2 bg-blue-gray-100" />
27+
<Typography variant="small" color="blue-gray">
28+
Or
29+
</Typography>
30+
<span className="h-[1px] w-1/2 bg-blue-gray-100" />
31+
</div>
32+
<Button
33+
variant="outlined"
34+
className="flex w-full items-center justify-center gap-2"
35+
>
36+
<img
37+
src="https://docs.material-tailwind.com/icons/google.svg"
38+
alt="google"
39+
className="h-4 w-4"
40+
/>
41+
Sign in with Google
42+
</Button>
43+
</div>
44+
);
45+
}

‎docs-content/react/input-phone/input-phone-with-icon.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Input, Typography } from "@material-tailwind/react";
2+
3+
export function InputPhoneWithIcon() {
4+
return (
5+
<div className="w-96">
6+
<Typography
7+
variant="small"
8+
color="blue-gray"
9+
className="mb-1 font-medium"
10+
>
11+
Contact Number
12+
</Typography>
13+
<Input
14+
maxLength={16}
15+
placeholder="e.g., +1 123-456-7890"
16+
pattern="^\+\d{1,3}\s\d{1,4}-\d{1,4}-\d{4}$"
17+
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"
18+
labelProps={{
19+
className: "before:content-none after:content-none",
20+
}}
21+
icon={
22+
<svg
23+
xmlns="http://www.w3.org/2000/svg"
24+
viewBox="0 0 24 24"
25+
fill="currentColor"
26+
className="h-4 w-4 text-blue-gray-600"
27+
>
28+
<path
29+
fill-rule="evenodd"
30+
d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z"
31+
clip-rule="evenodd"
32+
/>
33+
</svg>
34+
}
35+
/>
36+
<Typography className="mt-2 text-xs font-normal text-blue-gray-500">
37+
Include your country code for international numbers.
38+
</Typography>
39+
</div>
40+
);
41+
}

‎docs-content/react/input-phone/input-phone-with-select.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Select, Option } from "@material-tailwind/react";
2+
3+
export function InputPhoneWithSelect() {
4+
return (
5+
<div className="w-96">
6+
<Select label="Contact Number">
7+
<Option value="+33">(+33) 123-456-7890</Option>
8+
<Option value="+49">(+49) 123-456-7890</Option>
9+
<Option value="+31">(+31) 123-456-7890</Option>
10+
<Option value="+34">(+34) 123-456-7890</Option>
11+
</Select>
12+
</div>
13+
);
14+
}

‎docs-content/react/input-phone/input-simple-phone.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Input, Typography } from "@material-tailwind/react";
2+
3+
export function InputSimplePhone() {
4+
return (
5+
<div className="w-96">
6+
<Typography
7+
variant="small"
8+
color="blue-gray"
9+
className="mb-1 font-medium"
10+
>
11+
Contact Number
12+
</Typography>
13+
<Input
14+
maxLength={16}
15+
placeholder="e.g., +1 123-456-7890"
16+
pattern="^\+\d{1,3}\s\d{1,4}-\d{1,4}-\d{4}$"
17+
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"
18+
labelProps={{
19+
className: "before:content-none after:content-none",
20+
}}
21+
/>
22+
<Typography className="mt-2 text-xs font-normal text-blue-gray-500">
23+
Include your country code for international numbers.
24+
</Typography>
25+
</div>
26+
);
27+
}

0 commit comments

Comments
 (0)