Untitled

import React, { useState } from 'react';

import router from 'next/router';
import Select from 'react-select';

import { PrimaryButton } from 'src/globals/PrimaryButton/PrimaryButton';

import { useCities } from '@/api/city/getCities';

export default function PushNotifications() {
  const [Title, setTitle] = useState('');
  const [Description, setDescription] = useState('');
  const [Data, setData] = useState('');
  const [Host, setHost] = useState(false);
  const [Customer, setCustomer] = useState(false);

  const { data } = useCities();

  const options = data?.data?.map((value) => [
    {
      value: value.name,
      label: value.name,
    },
  ]);
  console.log(options);
  // console.log(data?.data[0]?.name);

  return (
    <div>
      <div className="flex justify-between">
        <header>
          <h4 className="text-2xl font-bold text-primary-800">
            Push Notification
          </h4>
        </header>
      </div>

      <div className="flex flex-col gap-2 py-2">
        <span>Title</span>
        <input
          className="w-3/4 px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
          id=""
          type="text"
          placeholder=""
          required
          onChange={(e) => setTitle(e.target.value)}
        ></input>
      </div>

      <div className="flex flex-col gap-2 py-2">
        <span>Description</span>
        <textarea
          className="w-3/4 px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
          id=""
          placeholder=""
          required
          onChange={(e) => setDescription(e.target.value)}
        ></textarea>
      </div>

      <div className="flex flex-col gap-2 py-2">
        <span>Data</span>
        <input
          className="w-3/4 px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
          id=""
          type="text"
          placeholder=""
          required
          onChange={(e) => setData(e.target.value)}
        ></input>
      </div>

      <div className="flex flex-col gap-2 py-2">
        <span>Select Type</span>
        <div className="flex flex-row ">
          <div className="px-2 form-check form-check-inline">
            <input
              className="float-left w-4 h-4 mt-1 mr-2 align-top transition duration-200 bg-white bg-center bg-no-repeat bg-contain border border-gray-300 rounded-full appearance-none cursor-pointer form-check-input checked:bg-blue-600 checked:border-blue-600 focus:outline-none"
              type="checkbox"
              name="Checkbox1"
              id="Checkbox1"
              value="option1"
              onClick={() => setHost(!Host)}
            ></input>{' '}
            <label
              className="inline-block text-gray-800 form-check-label"
              htmlFor="Checkbox1"
            >
              Host
            </label>
          </div>
          <div className="px-2 form-check form-check-inline">
            <input
              className="float-left w-4 h-4 mt-1 mr-2 align-top transition duration-200 bg-white bg-center bg-no-repeat bg-contain border border-gray-300 rounded-full appearance-none cursor-pointer form-check-input checked:bg-blue-600 checked:border-blue-600 focus:outline-none"
              type="checkbox"
              name="Checkbox2"
              id="Checkbox2"
              value="option2"
              onClick={() => setCustomer(!Customer)}
            ></input>
            <label
              className="inline-block text-gray-800 form-check-label"
              htmlFor="Checkbox2"
            >
              Customer
            </label>
          </div>
        </div>
      </div>

      <div className="flex flex-col gap-2 py-2">
        <span>Select Cities</span>
        <Select
          className="w-3/4 px-2 py-2 leading-tight text-gray-700 rounded shadow appearance-none focus:outline-none focus:shadow-outline"
          options={options}
          isMulti
        />
      </div>

      <div className="py-5">
        <PrimaryButton
          label="Send"
          type="button"
          onClick={() => router.push('/metadata/push-notification/')}
        />
      </div>
    </div>
  );
}