svb-hikip
commented
2 months ago /*
This example requires some changes to your config:
// tailwind.config.js module.exports = { // ... plugins: [ // ... require('@tailwindcss/forms'), ], }
*/
import { Fragment, useState } from 'react'
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
import { XMarkIcon } from '@heroicons/react/24/outline'
import { LinkIcon, PlusIcon, QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
const team = [
{
name: 'Tom Cook',
email: 'tom.cook@example.com',
href: '#',
imageUrl:
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
name: 'Whitney Francis',
email: 'whitney.francis@example.com',
href: '#',
imageUrl:
'https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
name: 'Leonard Krasner',
email: 'leonard.krasner@example.com',
href: '#',
imageUrl:
'https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
name: 'Floyd Miles',
email: 'floyd.miles@example.com',
href: '#',
imageUrl:
'https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
name: 'Emily Selman',
email: 'emily.selman@example.com',
href: '#',
imageUrl:
'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
]
export default function Example() {
const [open, setOpen] = useState(true)
return (
<Transition show={open}>
<Dialog className="relative z-10" onClose={setOpen}>
<div className="fixed inset-0" />
<div className="fixed inset-0 overflow-hidden">
<div className="absolute inset-0 overflow-hidden">
<div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
<TransitionChild
enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transform transition ease-in-out duration-500 sm:duration-700"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<DialogPanel className="pointer-events-auto w-screen max-w-2xl">
<form className="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
<div className="flex-1">
{/* Header */}
<div className="bg-gray-50 px-4 py-6 sm:px-6">
<div className="flex items-start justify-between space-x-3">
<div className="space-y-1">
<DialogTitle className="text-base font-semibold leading-6 text-gray-900">
New project
</DialogTitle>
<p className="text-sm text-gray-500">
Get started by filling in the information below to create your new project.
</p>
</div>
<div className="flex h-7 items-center">
<button
type="button"
className="relative text-gray-400 hover:text-gray-500"
onClick={() => setOpen(false)}
>
<span className="absolute -inset-2.5" />
<span className="sr-only">Close panel</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
</div>
</div>
{/* Divider container */}
<div className="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0">
{/* Project name */}
<div className="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
<div>
<label
htmlFor="project-name"
className="block text-sm font-medium leading-6 text-gray-900 sm:mt-1.5"
>
Project name
</label>
</div>
<div className="sm:col-span-2">
<input
type="text"
name="project-name"
id="project-name"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
{/* Project description */}
<div className="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
<div>
<label
htmlFor="project-description"
className="block text-sm font-medium leading-6 text-gray-900 sm:mt-1.5"
>
Description
</label>
</div>
<div className="sm:col-span-2">
<textarea
id="project-description"
name="project-description"
rows={3}
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
defaultValue={''}
/>
</div>
</div>
{/* Team members */}
<div className="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:items-center sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
<div>
<h3 className="text-sm font-medium leading-6 text-gray-900">Team Members</h3>
</div>
<div className="sm:col-span-2">
<div className="flex space-x-2">
{team.map((person) => (
<a
key={person.email}
href={person.href}
className="flex-shrink-0 rounded-full hover:opacity-75"
>
<img
className="inline-block h-8 w-8 rounded-full"
src={person.imageUrl}
alt={person.name}
/>
</a>
))}
<button
type="button"
className="relative inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 border-dashed border-gray-200 bg-white text-gray-400 hover:border-gray-300 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<span className="absolute -inset-2" />
<span className="sr-only">Add team member</span>
<PlusIcon className="h-5 w-5" aria-hidden="true" />
</button>
</div>
</div>
</div>
{/* Privacy */}
<fieldset className="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
<legend className="sr-only">Privacy</legend>
<div className="text-sm font-medium leading-6 text-gray-900" aria-hidden="true">
Privacy
</div>
<div className="space-y-5 sm:col-span-2">
<div className="space-y-5 sm:mt-0">
<div className="relative flex items-start">
<div className="absolute flex h-6 items-center">
<input
id="public-access"
name="privacy"
aria-describedby="public-access-description"
type="radio"
className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
defaultChecked
/>
</div>
<div className="pl-7 text-sm leading-6">
<label htmlFor="public-access" className="font-medium text-gray-900">
Public access
</label>
<p id="public-access-description" className="text-gray-500">
Everyone with the link will see this project
</p>
</div>
</div>
<div className="relative flex items-start">
<div className="absolute flex h-6 items-center">
<input
id="restricted-access"
name="privacy"
aria-describedby="restricted-access-description"
type="radio"
className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
/>
</div>
<div className="pl-7 text-sm leading-6">
<label htmlFor="restricted-access" className="font-medium text-gray-900">
Private to Project Members
</label>
<p id="restricted-access-description" className="text-gray-500">
Only members of this project would be able to access
</p>
</div>
</div>
<div className="relative flex items-start">
<div className="absolute flex h-6 items-center">
<input
id="private-access"
name="privacy"
aria-describedby="private-access-description"
type="radio"
className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
/>
</div>
<div className="pl-7 text-sm leading-6">
<label htmlFor="private-access" className="font-medium text-gray-900">
Private to you
</label>
<p id="private-access-description" className="text-gray-500">
You are the only one able to access this project
</p>
</div>
</div>
</div>
<hr className="border-gray-200" />
<div className="flex flex-col items-start space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
<div>
<a
href="#"
className="group flex items-center space-x-2.5 text-sm font-medium text-indigo-600 hover:text-indigo-900"
>
<LinkIcon
className="h-5 w-5 text-indigo-500 group-hover:text-indigo-900"
aria-hidden="true"
/>
<span>Copy link</span>
</a>
</div>
<div>
<a
href="#"
className="group flex items-center space-x-2.5 text-sm text-gray-500 hover:text-gray-900"
>
<QuestionMarkCircleIcon
className="h-5 w-5 text-gray-400 group-hover:text-gray-500"
aria-hidden="true"
/>
<span>Learn more about sharing</span>
</a>
</div>
</div>
</div>
</fieldset>
</div>
</div>
{/* Action buttons */}
<div className="flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6">
<div className="flex justify-end space-x-3">
<button
type="button"
className="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
onClick={() => setOpen(false)}
>
Cancel
</button>
<button
type="submit"
className="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Create
</button>
</div>
</div>
</form>
</DialogPanel>
</TransitionChild>
</div>
</div>
</div>
</Dialog>
</Transition>
)
}
UtkarshaaTelang
Kiruba2602
The add appointment button should open a Tailwind UI component I am passing the code for the component below
The form component must be Tailwind UI form Component