import React, { useState } from "react"; import { Card, Col, Container, Dropdown, Row, Form, Image, } from "react-bootstrap"; import BreadCrumb from "../../../Components/Common/BreadCrumb"; import DualListbox from './DualListbox'; import usflag from '../../../../images/flags/us.svg' import SimpleBar from "simplebar-react"; import { country } from "../../../common/data"; import { Head } from "@inertiajs/react"; import Layout from "../../../Layouts"; const FormAdvanced = () => { const [defaultCounter, setdefaultCounter] = useState(5); const [lightCounter, setlightCounter] = useState(4); const [fullwidthCounter, setfullwidthCounter] = useState(2); const [lfullwidthCounter, setlfullwidthCounter] = useState(1); const [blueCounter, setblueCounter] = useState(9); const [skyCounter, setskyCounter] = useState(5); const [greenCounter, setgreenCounter] = useState(7); const [tealCounter, settealCounter] = useState(3); const [yellowCounter, setyellowCounter] = useState(8); const [redCounter, setredCounter] = useState(5); function countUP(id: any, prev_data_attr: any) { id(prev_data_attr + 1); } function countDown(id: any, prev_data_attr: any) { id(prev_data_attr - 1); } const [seletedCountry, setseletedCountry] = useState(''); const [seletedCountry1, setseletedCountry1] = useState({}); const [seletedCountry2, setseletedCountry2] = useState(''); const [seletedCountry3, setseletedCountry3] = useState({ id: 240, flagImg: usflag, countryName: "United States of America", countryCode: "+1" }); const [seletedCountry4, setseletedCountry4] = useState({ id: 240, flagImg: usflag, countryName: "United States of America", countryCode: "+1" }); return (

Custom country select input
Simple select example {(country || []).map((item: any, key: number) => ( setseletedCountry(item.countryName)} key={key} className="dropdown-item d-flex">
country flag
{item.countryName}
{item.countryCode}
))}
Select input flag with img & name {(country || []).map((item: any, key: number) => ( setseletedCountry1(item)} key={key} className="dropdown-item d-flex">
country flag
{item.countryName}
{item.countryCode}
))}
Search input false in dropdown menu {(country || []).map((item: any, key: number) => ( setseletedCountry2(item.countryName)} key={key} className="dropdown-item d-flex">
country flag
{item.countryName}
{item.countryCode}
))}
Select input with buttons & Flag with number country flag {seletedCountry3.countryCode} {(country || []).map((item, key) => ( setseletedCountry3(item)} key={key} className="dropdown-item d-flex">
country flag
{item.countryName}
{item.countryCode}
))}
    Select input with buttons & Flag country flag {(country || []).map((item, key) => ( setseletedCountry4(item)} key={key} className="dropdown-item d-flex">
    country flag
    {item.countryName}
    {item.countryCode}
    ))}

    Form Input Spin
    Default
    Light
    Default (Full width)
    Light (Full width)
    Colored
    {/* Advanced */}

    Auto Complete
    Search Result of Fruit Names
    Search Result of Car Names

    Tranfer List
    ); }; FormAdvanced.layout = (page: any) => export default FormAdvanced;