Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
45 kB
6
Indexable
Never
import { turboFootballUrl } from '@/lib/api/getAxios';
import { Field, Form, Formik } from 'formik';
import React, { useEffect, useState } from 'react';
import { BiFootball } from 'react-icons/bi';
import { AiFillAndroid, AiFillApple } from 'react-icons/ai';
import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import * as Yup from 'yup';
import useAuthContext from '../../contexts/AuthContext';
import BlockCountrySelect from '../Input/BlockCountrySelect';
import { toast } from 'react-hot-toast';

const EditForm = () => {
    const [activeTab, setActiveTab] = useState(0);
    const [loading, setLoading] = useState(true);
    const [initialValues, setInitialValues] = useState({});

    const { token } = useAuthContext();

    useEffect(() => {
        setLoading(true);
        async function getSettings() {
            await turboFootballUrl
                .get('/api/admin/v1/settings', {
                    headers: {
                        authorization: `bearer ${token}`,
                    },
                })
                .then((res) => {
                    console.log(res.data);
                    setInitialValues(res?.data?.data);
                    setLoading(false);
                });
        }
        getSettings();
    }, [token]);

    const defaultValueAnd = initialValues?.android_settings?.block_country;
    const defaultValueIos = initialValues?.ios_settings?.block_country;

    // Define the validation schema using Yup
    const validationSchema = Yup.object().shape({
        // Define your validation schema here
    });

    const handleTabChange = (index) => {
        setActiveTab(index);
    };

    const handleSubmit = async (values) => {
        // Handle form submission here
        setLoading(true);
        await turboFootballUrl
            .put('/api/admin/v1/settings', values, {
                headers: {
                    authorization: `bearer ${token}`,
                    api_key: process.env.NEXT_PUBLIC_TURBO_API_TOKEN,
                },
            })
            .then((res) => {
                // console.log(res.data);
                // setInitialValues(res?.data?.updatedAppSettings);
                toast.success(res?.data?.message)
                setLoading(false);
            });
    };

    return (
        <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit} enableReinitialize>
            {({ values, setFieldValue }) => (
                <Form>
                    <div className="card mb-3">
                        <div className="card-body">
                            <div className="row ">
                                <div className="col-md-12">
                                    <label className="mt-4 px-2 text-[16px] font-semibold">
                                        Notification Type <span className="text-[16px] text-red-500">*</span>
                                    </label>
                                    <Field as="select" name="notification_type" class="Select an option form-select">
                                        <option value="Select One" disabled>
                                            Select One
                                        </option>
                                        <option value="onesignal">OneSignal</option>
                                        <option value="fcm">FCM</option>
                                    </Field>
                                </div>
                                {values?.notification_type === 'onesignal' && (
                                    <>
                                        <div className="col-md-6">
                                            <div className="form-group">
                                                <label className="mt-4 px-2 text-[16px] font-semibold" htmlFor="email">
                                                    One signal app id{' '}
                                                </label>
                                                <Field className="form-input" name="one_signal_app_id" />
                                            </div>
                                        </div>
                                        <div className="col-md-6">
                                            <div className="form-group">
                                                <label className="mt-4 px-2 text-[16px] font-semibold" htmlFor="email">
                                                    One signal api key
                                                </label>
                                                <Field className="form-input" name="one_signal_api_key" id="" />
                                            </div>
                                        </div>
                                    </>
                                )}
                                {values?.notification_type === 'fcm' && (
                                    <>
                                        <div className="col-md-6">
                                            <div className="form-group">
                                                <label className="mt-4 px-2 text-[16px] font-semibold" htmlFor="email">
                                                    Firebase Server Key
                                                </label>
                                                <Field className="form-input" name="firebase_key" />
                                            </div>
                                        </div>
                                        <div className="col-md-6">
                                            <div className="form-group">
                                                <label className="mt-4 px-2 text-[16px] font-semibold" htmlFor="email">
                                                    Firebase Topic
                                                </label>
                                                <Field className="form-input" name="firebase_topics" id="" />
                                            </div>
                                        </div>
                                    </>
                                )}

                                <div className="col-md-6">
                                    <div className="form-group">
                                        <label className="mt-4 px-2 text-[16px] font-semibold" htmlFor="email">
                                            Sports Api Base Url <span className="text-[16px] text-red-500">*</span>
                                        </label>
                                        <Field name="api_base_url" className="form-input" />
                                    </div>
                                </div>
                                <div className="col-md-6">
                                    <div className="form-group">
                                        <label className="mt-4 px-2 text-[16px] font-semibold" htmlFor="email">
                                            Sports Api Key <span className="text-[16px] text-red-500">*</span>
                                        </label>
                                        <Field name="api_key" className="form-input" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <Tabs selectedIndex={activeTab} onSelect={handleTabChange}>
                        <TabList className="flex items-center justify-center gap-5 mt-10">
                            <Tab className={`px-4 py-2 font-semibold rounded shadow bg-white text-lg text-gray-800 flex items-center gap-2 ${activeTab === 0 && 'bg-blue-500 text-gray-200 shadow-md shadow-blue-300 scale-110 transition-all ease-linear'}`}> <AiFillAndroid/> <p>Android Settings</p> </Tab>
                            <Tab className={`px-4 py-2 font-semibold rounded shadow bg-white text-lg text-gray-800 flex items-center gap-2 ${activeTab === 1 && 'bg-blue-500 text-gray-200 shadow-md shadow-blue-300 scale-110 transition-all ease-linear'}`}><AiFillApple/> <p>Ios Settings</p> </Tab>
                        </TabList>

                        <TabPanel>
                            <div className="mt-2">
                                {/* General Settings */}
                                <h4 className="mb-2 text-lg font-normal">General Settings</h4>
                                <div>
                                    <label className="mt-2 px-1 font-semibold" htmlFor="privacy_policy">
                                        Privacy Policy
                                    </label>
                                    <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.privacy_policy" />
                                </div>
                                <div>
                                    <label className="mt-2 px-1 font-semibold" htmlFor="terms_condition">
                                        Terms & Condition
                                    </label>
                                    <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.terms_condition" />
                                </div>
                                <div>
                                    <label className="mt-2 px-1 font-semibold" htmlFor="share_link">
                                        App Share Link
                                    </label>
                                    <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.share_link" />
                                </div>

                                {/* App Control */}
                                <div className="mt-2">
                                    <h4 className="mb-2 text-lg font-normal">App Control</h4>
                                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="default_page">
                                                App Default Page
                                            </label>
                                            <Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="android_settings.default_page">
                                                <option value="Select One" disabled>
                                                    Select One
                                                </option>
                                                <option value="Live">Live</option>
                                                <option value="Home">Home</option>
                                            </Field>
                                        </div>
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="publish_control">
                                                App Publishing Control
                                            </label>
                                            <Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="android_settings.publish_control">
                                                <option value="Select One" disabled>
                                                    Select One
                                                </option>
                                                <option value={true}>On</option>
                                                <option value={false}>Off</option>
                                            </Field>
                                        </div>
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="hide_version">
                                                Hide Live by Version Code
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="number" name="android_settings.hide_version" />
                                        </div>
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="highlights_type">
                                                Highlights Type
                                            </label>
                                            <Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="highlights_type" id="android_settings.highlights_type">
                                                <option value="Select One" disabled>
                                                    Select One
                                                </option>
                                                <option value="Enable">Enable</option>
                                                <option value="Disable">Disable</option>
                                                <option value="YouTube Only">YouTube Only</option>
                                            </Field>
                                        </div>
                                    </div>
                                </div>
                                {/* Ads Control */}
                                <div className="mt-2">
                                    <h4 className="mb-2 text-lg font-normal">Ads Control</h4>
                                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="aads_status">
                                                Ads Status
                                            </label>
                                            <Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="aads_status" id="android_settings.aads_status">
                                                <option value="Select One" disabled>
                                                    Select One
                                                </option>
                                                <option value={true}>On</option>
                                                <option value={false}>Off</option>
                                            </Field>
                                        </div>

                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="click_control">
                                                Click Control
                                            </label>
                                            <Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="click_control" id="android_settings.click_control">
                                                <option value="Select One" disabled>
                                                    Select One
                                                </option>
                                                <option value="Off">Off</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                            </Field>
                                        </div>

                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="app_id">
                                                Google App ID
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.app_id" />
                                        </div>
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="app_open_id">
                                                Google App Open Ads Code
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.app_open_id" />
                                        </div>
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="banner_id">
                                                Google Banner Ads Code
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.banner_id" />
                                        </div>
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="interstitial_id">
                                                Google Interstitial Ads Code
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.interstitial_id" />
                                        </div>
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="adaptive_interstitial_id">
                                                Google Adaptive Interstitial Ads Code
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.adaptive_interstitial_id" />
                                        </div>
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="native_id">
                                                Google Native Ads Code
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.native_id" />
                                        </div>
                                        <div className="col-span-1 md:col-span-2">
                                            <label className="mt-2 px-1 font-semibold" htmlFor="rewarded_aads">
                                                Google Rewarded Ads Code
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.rewarded_aads" />
                                        </div>
                                    </div>
                                </div>

                                <div className="mt-2">
                                    <h4 className="mb-2 text-lg font-normal">Version Control</h4>
                                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="version_code">
                                                Version Code
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.version_code" />
                                        </div>

                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="force_update">
                                                Force Update
                                            </label>
                                            <Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="android_settings.force_update">
                                                <option value="Select One" disabled>
                                                    Select One
                                                </option>
                                                <option value={true}>On</option>
                                                <option value={false}>Off</option>
                                            </Field>
                                        </div>

                                        <div className="col-span-1 md:col-span-2">
                                            <label className="mt-2 px-1 font-semibold" htmlFor="app_url">
                                                App Url
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.app_url" />
                                        </div>

                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="update_location">
                                                App Update Location
                                            </label>
                                            <Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="android_settings.update_location">
                                                <option value="Select One" disabled>
                                                    Select One
                                                </option>
                                                <option value="Store">Store</option>
                                                <option value="Web">Web</option>
                                            </Field>
                                        </div>

                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="button_text">
                                                Button Text
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.button_text" />
                                        </div>

                                        <div className="col-span-1 md:col-span-2">
                                            <label className="mt-2 px-1 font-semibold" htmlFor="description">
                                                Description
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="android_settings.description" />
                                        </div>
                                    </div>
                                </div>
                                <div className="mt-2">
                                    <h4 className="mb-2 text-lg font-normal">Block Country</h4>
                                    <label className="mt-2 px-1 font-semibold" htmlFor="description">
                                        Select Countries
                                    </label>
                                    <BlockCountrySelect key={"android_settings"} name="android_settings.block_country" defaultValue={defaultValueAnd} initialValues={initialValues} values={values} setFieldValue={setFieldValue} />
                                </div>
                            </div>
                        </TabPanel>

                        <TabPanel>
                            <div className="mt-2">
                                {/* General Settings */}
                                <h4 className="mb-2 text-lg font-normal">General Settings</h4>
                                <div>
                                    <label className="mt-2 px-1 font-semibold" htmlFor="privacy_policy">
                                        Privacy Policy
                                    </label>
                                    <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.privacy_policy" />
                                </div>
                                <div>
                                    <label className="mt-2 px-1 font-semibold" htmlFor="terms_condition">
                                        Terms & Condition
                                    </label>
                                    <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.terms_condition" />
                                </div>
                                <div>
                                    <label className="mt-2 px-1 font-semibold" htmlFor="share_link">
                                        App Share Link
                                    </label>
                                    <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.share_link" />
                                </div>

                                {/* App Control */}
                                <div className="mt-2">
                                    <h4 className="mb-2 text-lg font-normal">App Control</h4>
                                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="default_page">
                                                App Default Page
                                            </label>
                                            <Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="ios_settings.default_page">
                                                <option value="Select One" disabled>
                                                    Select One
                                                </option>
                                                <option value="Live">Live</option>
                                                <option value="Home">Home</option>
                                            </Field>
                                        </div>
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="publish_control">
                                                App Publishing Control
                                            </label>
                                            <Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="ios_settings.publish_control">
                                                <option value="Select One" disabled>
                                                    Select One
                                                </option>
                                                <option value={true}>On</option>
                                                <option value={false}>Off</option>
                                            </Field>
                                        </div>
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="hide_version">
                                                Hide Live by Version Code
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="number" name="ios_settings.hide_version" />
                                        </div>
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="highlights_type">
                                                Highlights Type
                                            </label>
                                            <Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="highlights_type" id="ios_settings.highlights_type">
                                                <option value="Select One" disabled>
                                                    Select One
                                                </option>
                                                <option value="Enable">Enable</option>
                                                <option value="Disable">Disable</option>
                                                <option value="YouTube Only">YouTube Only</option>
                                            </Field>
                                        </div>
                                    </div>
                                </div>
                                {/* Ads Control */}
                                <div className="mt-2">
                                    <h4 className="mb-2 text-lg font-normal">Ads Control</h4>
                                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="aads_status">
                                                Ads Status
                                            </label>
                                            <Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="aads_status" id="ios_settings.aads_status">
                                                <option value="Select One" disabled>
                                                    Select One
                                                </option>
                                                <option value={true}>On</option>
                                                <option value={false}>Off</option>
                                            </Field>
                                        </div>

                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="click_control">
                                                Click Control
                                            </label>
                                            <Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="click_control" id="ios_settings.click_control">
                                                <option value="Select One" disabled>
                                                    Select One
                                                </option>
                                                <option value="Off">Off</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                            </Field>
                                        </div>

                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="app_id">
                                                Google App ID
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.app_id" />
                                        </div>
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="app_open_id">
                                                Google App Open Ads Code
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.app_open_id" />
                                        </div>
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="banner_id">
                                                Google Banner Ads Code
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.banner_id" />
                                        </div>
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="interstitial_id">
                                                Google Interstitial Ads Code
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.interstitial_id" />
                                        </div>
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="adaptive_interstitial_id">
                                                Google Adaptive Interstitial Ads Code
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.adaptive_interstitial_id" />
                                        </div>
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="native_id">
                                                Google Native Ads Code
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.native_id" />
                                        </div>
                                        <div className="col-span-1 md:col-span-2">
                                            <label className="mt-2 px-1 font-semibold" htmlFor="rewarded_aads">
                                                Google Rewarded Ads Code
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.rewarded_aads" />
                                        </div>
                                    </div>
                                </div>

                                <div className="mt-2">
                                    <h4 className="mb-2 text-lg font-normal">Version Control</h4>
                                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="version_code">
                                                Version Code
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.version_code" />
                                        </div>

                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="force_update">
                                                Force Update
                                            </label>
                                            <Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="ios_settings.force_update">
                                                <option value="Select One" disabled>
                                                    Select One
                                                </option>
                                                <option value={true}>On</option>
                                                <option value={false}>Off</option>
                                            </Field>
                                        </div>

                                        <div className="col-span-1 md:col-span-2">
                                            <label className="mt-2 px-1 font-semibold" htmlFor="app_url">
                                                App Url
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.app_url" />
                                        </div>

                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="update_location">
                                                App Update Location
                                            </label>
                                            <Field as="select" className="w-full rounded-md border border-gray-300 px-4 py-2" name="ios_settings.update_location">
                                                <option value="Select One" disabled>
                                                    Select One
                                                </option>
                                                <option value="Store">Store</option>
                                                <option value="Web">Web</option>
                                            </Field>
                                        </div>

                                        <div>
                                            <label className="mt-2 px-1 font-semibold" htmlFor="button_text">
                                                Button Text
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.button_text" />
                                        </div>

                                        <div className="col-span-1 md:col-span-2">
                                            <label className="mt-2 px-1 font-semibold" htmlFor="description">
                                                Description
                                            </label>
                                            <Field className="w-full rounded-md border border-gray-300 px-4 py-2 " type="text" name="ios_settings.description" />
                                        </div>
                                    </div>
                                </div>
                                <div className="mt-2">
                                    <h4 className="mb-2 text-lg font-normal">Block Country</h4>
                                    <label className="mt-2 px-1 font-semibold" htmlFor="description">
                                        Select Countries
                                    </label>
                                    <BlockCountrySelect  key={'ios_settings'} name="ios_settings.block_country" defaultValue={defaultValueIos} initialValues={initialValues} setFieldValue={setFieldValue} />
                                </div>
                            </div>
                        </TabPanel>
                    </Tabs>

                
                    <button type="submit" className="btn btn-outline-primary btn-lg">
                    Submit
                    {loading ? 
                            <>
                                <svg
                                    viewBox="0 0 24 24"
                                    width="24"
                                    height="24"
                                    stroke="currentColor"
                                    strokeWidth="1.5"
                                    fill="none"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    className="inline-block h-5 w-5 shrink-0 animate-[spin_2s_linear_infinite] align-middle ltr:ml-2 rtl:mr-2"
                                    >
                                    <line x1="12" y1="2" x2="12" y2="6"></line>
                                    <line x1="12" y1="18" x2="12" y2="22"></line>
                                    <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
                                    <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
                                    <line x1="2" y1="12" x2="6" y2="12"></line>
                                    <line x1="18" y1="12" x2="22" y2="12"></line>
                                    <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
                                    <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
                                </svg>
                            </>
                            : 
                            <>
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="ml-2 h-5 w-5">
                                    <path
                                        opacity="0.5"
                                        d="M3 15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15"
                                        stroke="currentColor"
                                        strokeWidth="1.5"
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                    ></path>
                                    <path d="M12 3V16M12 16L16 11.625M12 16L8 11.625" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>
                                </svg>
                            </>
                    }
                    </button>
                </Form>
            )}
        </Formik>
    );
};

export default EditForm;