Skip to content

Commit 6eefb0d

Browse files
fazlyalahi01fazlyalahi01
authored
Merge branch 'Asfak00:production' into production
2 parents d6b3c63 + 71cec89 commit 6eefb0d

File tree

3 files changed

+299
-1
lines changed

3 files changed

+299
-1
lines changed

‎src/Components/Overview/SidebarContent/Content/Inputs/NumberDropDown.jsx‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import { useState } from "react";
2+
3+
const countries = [
4+
{
5+
name: "United States",
6+
code: "+1",
7+
flag: <span className="me-2">🇺🇸</span>,
8+
},
9+
{
10+
name: "Bangladesh",
11+
code: "+880",
12+
flag: <span className="me-2">🇧🇩</span>,
13+
},
14+
{
15+
name: "United Kingdom",
16+
code: "+44",
17+
flag: <span className="me-2">🇬🇧</span>,
18+
},
19+
{
20+
name: "Canada",
21+
code: "+1",
22+
flag: <span className="me-2">🇨🇦</span>,
23+
},
24+
{
25+
name: "Australia",
26+
code: "+61",
27+
flag: <span className="me-2">🇦🇺</span>,
28+
},
29+
{
30+
name: "Germany",
31+
code: "+49",
32+
flag: <span className="me-2">🇩🇪</span>,
33+
},
34+
{
35+
name: "France",
36+
code: "+33",
37+
flag: <span className="me-2">🇫🇷</span>,
38+
},
39+
{
40+
name: "Brazil",
41+
code: "+55",
42+
flag: <span className="me-2">🇧🇷</span>,
43+
},
44+
{
45+
name: "Mexico",
46+
code: "+52",
47+
flag: <span className="me-2">🇲🇽</span>,
48+
},
49+
{
50+
name: "Japan",
51+
code: "+81",
52+
flag: <span className="me-2">🇯🇵</span>,
53+
},
54+
{
55+
name: "South Korea",
56+
code: "+82",
57+
flag: <span className="me-2">🇰🇷</span>,
58+
},
59+
{
60+
name: "China",
61+
code: "+86",
62+
flag: <span className="me-2">🇨🇳</span>,
63+
},
64+
{
65+
name: "Russia",
66+
code: "+7",
67+
flag: <span className="me-2">🇷🇺</span>,
68+
},
69+
{
70+
name: "Italy",
71+
code: "+39",
72+
flag: <span className="me-2">🇮🇹</span>,
73+
},
74+
{
75+
name: "Spain",
76+
code: "+34",
77+
flag: <span className="me-2">🇪🇸</span>,
78+
},
79+
{
80+
name: "South Africa",
81+
code: "+27",
82+
flag: <span className="me-2">🇿🇦</span>,
83+
},
84+
{
85+
name: "Argentina",
86+
code: "+54",
87+
flag: <span className="me-2">🇦🇷</span>,
88+
},
89+
{
90+
name: "Egypt",
91+
code: "+20",
92+
flag: <span className="me-2">🇪🇬</span>,
93+
},
94+
];
95+
96+
97+
export default function NumberDropdown({ selectedCountry, onSelect }) {
98+
const [isOpen, setIsOpen] = useState(false);
99+
100+
const handleSelect = (country) => {
101+
onSelect(country);
102+
setIsOpen(false);
103+
};
104+
105+
return (
106+
<div className="relative">
107+
<button
108+
type="button"
109+
className="flex items-center py-2.5 px-4 text-sm font-medium text-gray-900 dark:text-[#8b99a9] border-y border-l border-gray-300 dark:border-[#58667c] rounded-s-lg"
110+
onClick={() => setIsOpen(!isOpen)}
111+
>
112+
{selectedCountry.flag}
113+
{selectedCountry.code}
114+
<svg className="w-2.5 h-2.5 ms-2.5" fill="none" viewBox="0 0 10 6">
115+
<path
116+
d="M1 1l4 4 4-4"
117+
stroke="currentColor"
118+
strokeLinecap="round"
119+
strokeLinejoin="round"
120+
strokeWidth="2"
121+
/>
122+
</svg>
123+
</button>
124+
125+
{isOpen && (
126+
<div className="absolute z-10 mt-1 bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-60 ">
127+
<ul className="py-2 text-sm text-gray-700 dark:text-gray-200 max-h-[200px] overflow-x-auto">
128+
{countries.map((country) => (
129+
<li key={country.code}>
130+
<button
131+
type="button"
132+
className="inline-flex w-full px-4 py-2 text-sm text-gray-700"
133+
onClick={() => handleSelect(country)}
134+
>
135+
<span className="inline-flex items-center">
136+
{country.flag}
137+
{country.name} ({country.code})
138+
</span>
139+
</button>
140+
</li>
141+
))}
142+
</ul>
143+
</div>
144+
)}
145+
</div>
146+
);
147+
}

‎src/Components/Overview/SidebarContent/Content/Inputs/TextInput.jsx‎

Lines changed: 147 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import { useState } from 'react';
22

33
// components
44
import OverviewFooter from '../../../../../Shared/OverviewFooter';
@@ -25,6 +25,7 @@ import ToggleTab from "../../../../../Shared/Component/ToggleTab.jsx";
2525
import ContentNavbar from "../../../../../Shared/Component/ContentNavbar.jsx";
2626
import ComponentDescription from "../../../../../Shared/Component/ComponentDescription.jsx";
2727
import ComponentWrapper from "../../../../../Shared/Component/ComponentWrapper.jsx";
28+
import NumberDropdown from './NumberDropDown.jsx';
2829

2930
const TextInput = () => {
3031
const sectionIds = textInputContents.map((item) => item.href.slice(1));
@@ -62,13 +63,23 @@ const TextInput = () => {
6263
const [joinInputPreview, setJoinInputPreview] = useState(true);
6364
const [joinInputCode, setJoinInputCode] = useState(false);
6465

66+
//international phone number
67+
const [internationalNumberInputPreview, setInternationalNumberInputPreview] = useState(true);
68+
const [internationalNumberInputCode, setInternationalNumberInputCode] = useState(false);
69+
6570
// actions
6671
const [isEyeOpen, setIsEyeOpen] = useState(false);
6772

6873
// price dropdown actions
6974
const [priceDropdownOpen, setPriceDropdownOpen] = useState(false);
7075
const [selectedCurrencyType, setSelectedCurrencyType] = useState('USD');
7176

77+
const [selectedCountry, setSelectedCountry] = useState({
78+
name: "United States",
79+
code: "+1",
80+
flag: <span className="me-2">🇺🇸</span>,
81+
});
82+
7283
const allCurrencyTypes = ['USD', 'EUR', 'BDT'];
7384

7485
const handlePriceDropdownClick = (currency) => {
@@ -841,6 +852,141 @@ export default NewsletterSubscribeInput;
841852
)}
842853
</ComponentWrapper>
843854

855+
{/* international phone number input */}
856+
857+
<div className='mt-8'>
858+
<ContentHeader text={'International number input'} id={'internation_number_input'}/>
859+
</div>
860+
861+
<ComponentDescription text='This is an international number input field, where users select the national phone number format and enter their number.'/>
862+
863+
<ToggleTab preview={internationalNumberInputPreview} setPreview={setInternationalNumberInputPreview} code={internationalNumberInputCode}
864+
setCode={setInternationalNumberInputCode}/>
865+
866+
<ComponentWrapper>
867+
{internationalNumberInputPreview && (
868+
<div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
869+
<div className='w-full 1024px:w-[80%] relative inline-flex'>
870+
<NumberDropdown
871+
selectedCountry={selectedCountry}
872+
onSelect={setSelectedCountry}
873+
/>
874+
<input
875+
type="text"
876+
name="phone"
877+
placeholder="Enter your phone number"
878+
className="border border-gray-300 dark:border-[#58667c] px-4 py-2 rounded-e-lg w-full focus:outline-none dark:bg-[rgb(2,6,23)] text-black dark:text-[#8a9daf]"
879+
/>
880+
</div>
881+
</div>
882+
)}
883+
884+
{internationalNumberInputCode && (
885+
<Showcode
886+
code='
887+
import { useState } from "react";
888+
const countries = [
889+
{
890+
name: "United States",
891+
code: "+1",
892+
flag: <span className="me-2">🇺🇸</span>,
893+
},
894+
{
895+
name: "Bangladesh",
896+
code: "+880",
897+
flag: <span className="me-2">🇧🇩</span>,
898+
},
899+
{
900+
name: "United Kingdom",
901+
code: "+44",
902+
flag: <span className="me-2">🇬🇧</span>,
903+
},
904+
{
905+
name: "Canada",
906+
code: "+1",
907+
flag: <span className="me-2">🇨🇦</span>,
908+
},
909+
// add other country numbers if your need.
910+
];
911+
function PhoneDropdown({ selectedCountry, onSelect }) {
912+
const [isOpen, setIsOpen] = useState(false);
913+
const handleSelect = (country) => {
914+
onSelect(country);
915+
setIsOpen(false);
916+
};
917+
return (
918+
<div className="relative">
919+
<button
920+
type="button"
921+
className="flex items-center py-2.5 px-4 text-sm font-medium text-gray-900 border-y border-l border-gray-300 rounded-s-lg"
922+
onClick={() => setIsOpen(!isOpen)}
923+
>
924+
{selectedCountry.flag}
925+
{selectedCountry.code}
926+
<svg className="w-2.5 h-2.5 ms-2.5" fill="none" viewBox="0 0 10 6">
927+
<path
928+
d="M1 1l4 4 4-4"
929+
stroke="currentColor"
930+
strokeLinecap="round"
931+
strokeLinejoin="round"
932+
strokeWidth="2"
933+
/>
934+
</svg>
935+
</button>
936+
{isOpen && (
937+
<div className="absolute z-10 mt-1 bg-white divide-y divide-gray-100 rounded-lg shadow-lg w-60 ">
938+
<ul className="py-2 text-sm text-gray-700 max-h-[400px] overflow-x-auto">
939+
{countries.map((country, index) => (
940+
<li key={index}>
941+
<button
942+
type="button"
943+
className="inline-flex w-full px-4 py-2 text-sm text-gray-700"
944+
onClick={() => handleSelect(country)}
945+
>
946+
<span className="inline-flex items-center">
947+
{country.flag}
948+
{country.name} ({country.code})
949+
</span>
950+
</button>
951+
</li>
952+
))}
953+
</ul>
954+
</div>
955+
)}
956+
</div>
957+
);
958+
}
959+
const PhoneNumber = () => {
960+
const [selectedCountry, setSelectedCountry] = useState({
961+
name: "United States",
962+
code: "+1",
963+
flag: <span className="me-2">🇺🇸</span>,
964+
});
965+
const [phoneNumber, setPhoneNumber] = useState("");
966+
return (
967+
<div className="inline-flex">
968+
<PhoneDropdown
969+
selectedCountry={selectedCountry}
970+
onSelect={setSelectedCountry}
971+
/>
972+
<input
973+
type="text"
974+
name="phone"
975+
placeholder="Enter your phone number"
976+
className="border border-gray-300 px-4 py-2 rounded-e-lg w-full focus:outline-none text-black"
977+
value={phoneNumber}
978+
onChange={(e) => setPhoneNumber(e.target.value)}
979+
/>
980+
</div>
981+
);
982+
};
983+
export default PhoneNumber;
984+
'
985+
/>
986+
)}
987+
</ComponentWrapper>
988+
989+
844990
<OverviewFooter
845991
backName='all components'
846992
backUrl='/components/all-components'

‎src/Utils/ContentsConfig/InputContents.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ export const textInputContents = [
4545
title: 'Join Us Input',
4646
href: '#join_us_input',
4747
},
48+
{
49+
id:10,
50+
title:'internation number input',
51+
href:'#internation_number_input'
52+
}
4853
];
4954

5055
export const textareaInputContents = [

0 commit comments

Comments
 (0)