dashboard/src/modules/users/components/UserModal/components/AppAccess.tsx

import React, { useState } from 'react';
import { Switch } from '@headlessui/react';

function classNames(...classes: any) {
  return classes.filter(Boolean).join(' ');
}

export const AppAccessTab = () => {
  const [enabled, setEnabled] = useState(false);

  return (
    <div>
      <div className="mb-6">
        <Switch.Group as="div" className="flex items-center justify-between">
          <div className="flex-grow flex items-center">
            <div className="flex-shrink-0 h-10 w-10 mr-4">
              <img className="h-10 w-10 rounded-md overflow-hidden" src="/assets/wekan.svg" alt="" />
            </div>
            <div className="flex flex-col">
              <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
                Wekan
              </Switch.Label>
            </div>
          </div>
          <Switch
            checked={enabled}
            onChange={setEnabled}
            className={classNames(
              enabled ? 'bg-primary-600' : 'bg-gray-200',
              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
            )}
          >
            <span
              aria-hidden="true"
              className={classNames(
                enabled ? 'translate-x-5' : 'translate-x-0',
                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
              )}
            />
          </Switch>
        </Switch.Group>
      </div>

      <div className="mb-6">
        <Switch.Group as="div" className="flex items-center justify-between">
          <div className="flex-grow flex items-center">
            <div className="flex-shrink-0 h-10 w-10 mr-4">
              <img className="h-10 w-10 rounded-md overflow-hidden" src="/assets/wordpress.svg" alt="" />
            </div>
            <div className="flex flex-col">
              <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
                Wordpress
              </Switch.Label>
            </div>
          </div>
          <Switch
            checked={enabled}
            onChange={setEnabled}
            className={classNames(
              enabled ? 'bg-primary-600' : 'bg-gray-200',
              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
            )}
          >
            <span
              aria-hidden="true"
              className={classNames(
                enabled ? 'translate-x-5' : 'translate-x-0',
                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
              )}
            />
          </Switch>
        </Switch.Group>
      </div>

      <div className="mb-6">
        <Switch.Group as="div" className="flex items-center justify-between">
          <div className="flex-grow flex items-center">
            <div className="flex-shrink-0 h-10 w-10 mr-4">
              <img className="h-10 w-10 rounded-md overflow-hidden" src="/assets/nextcloud.svg" alt="" />
            </div>
            <div className="flex flex-col">
              <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
                Nextcloud
              </Switch.Label>
            </div>
          </div>
          <Switch
            checked={enabled}
            onChange={setEnabled}
            className={classNames(
              enabled ? 'bg-primary-600' : 'bg-gray-200',
              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
            )}
          >
            <span
              aria-hidden="true"
              className={classNames(
                enabled ? 'translate-x-5' : 'translate-x-0',
                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
              )}
            />
          </Switch>
        </Switch.Group>
      </div>

      <div className="mb-6">
        <Switch.Group as="div" className="flex items-center justify-between">
          <div className="flex-grow flex items-center">
            <div className="flex-shrink-0 h-10 w-10 mr-4">
              <img className="h-10 w-10 rounded-md overflow-hidden" src="/assets/rocketchat.svg" alt="" />
            </div>
            <div className="flex flex-col">
              <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
                Rocketchat
              </Switch.Label>
            </div>
          </div>
          <Switch
            checked={enabled}
            onChange={setEnabled}
            className={classNames(
              enabled ? 'bg-primary-600' : 'bg-gray-200',
              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
            )}
          >
            <span
              aria-hidden="true"
              className={classNames(
                enabled ? 'translate-x-5' : 'translate-x-0',
                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
              )}
            />
          </Switch>
        </Switch.Group>
      </div>
    </div>
  );
};