114 lines
4.6 KiB
TypeScript
114 lines
4.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { InformationCircleIcon } from '@heroicons/react/solid';
|
|
import { Switch } from '@headlessui/react';
|
|
|
|
function classNames(...classes: any) {
|
|
return classes.filter(Boolean).join(' ');
|
|
}
|
|
|
|
export const AdvancedTab = () => {
|
|
const [enabled, setEnabled] = useState(false);
|
|
|
|
return (
|
|
<div>
|
|
<div className="rounded-md py-2 mb-6">
|
|
<div className="flex">
|
|
<div className="flex-shrink-0">
|
|
<InformationCircleIcon className="h-5 w-5 text-blue-500" aria-hidden="true" />
|
|
</div>
|
|
<div className="ml-3 flex-1 md:flex md:justify-between">
|
|
<p className="text-sm text-gray-900">You can give or revoke app access for this user</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<Switch.Group as="div" className="flex items-center justify-between">
|
|
<span className="flex-grow flex flex-col">
|
|
<Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
|
|
User
|
|
</Switch.Label>
|
|
<Switch.Description as="span" className="text-sm text-gray-500">
|
|
Gives this user access only to assigned apps.
|
|
</Switch.Description>
|
|
</span>
|
|
<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">
|
|
<span className="flex-grow flex flex-col">
|
|
<Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
|
|
Admin
|
|
</Switch.Label>
|
|
<Switch.Description as="span" className="text-sm text-gray-500">
|
|
Gives this user access to all apps and permission to change other users roles
|
|
</Switch.Description>
|
|
</span>
|
|
<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">
|
|
<span className="flex-grow flex flex-col">
|
|
<Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
|
|
Super Admin
|
|
</Switch.Label>
|
|
<Switch.Description as="span" className="text-sm text-gray-500">
|
|
Will transfer all Super Admin rights to this user
|
|
</Switch.Description>
|
|
</span>
|
|
<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>
|
|
);
|
|
};
|