search

svb-hikip / hikipfe-react-public

4 stars 20 forks source link

Task 7 - Add Client option #33

Closed svb-hikip closed 2 months ago

svb-hikip commented 2 months ago

image

A create client button which opens a side over with create client form.

Use Tailwind Css and Tailwind UI only

Find below the sideover code

will provide you API endpoint on request

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 (

{/* Header */}
New project

Get started by filling in the information below to create your new project.

{/* Divider container */}
{/* Project name */}
{/* Project description */}