/* This example requires some changes to your config: ``` // tailwind.config.js module.exports = { // ... plugins: [ // ... require('@tailwindcss/forms'), ], } ``` */ import { Fragment, useState } from 'react' import { Dialog, Menu, Transition } from '@headlessui/react' import { ChartBarSquareIcon, Cog6ToothIcon, FolderIcon, GlobeAltIcon, ServerIcon, SignalIcon, XMarkIcon, } from '@heroicons/react/24/outline' import { Bars3Icon, ChevronRightIcon, ChevronUpDownIcon, MagnifyingGlassIcon } from '@heroicons/react/20/solid' const navigation = [ { name: 'Projects', href: '#', icon: FolderIcon, current: false }, { name: 'Deployments', href: '#', icon: ServerIcon, current: true }, { name: 'Activity', href: '#', icon: SignalIcon, current: false }, { name: 'Domains', href: '#', icon: GlobeAltIcon, current: false }, { name: 'Usage', href: '#', icon: ChartBarSquareIcon, current: false }, { name: 'Settings', href: '#', icon: Cog6ToothIcon, current: false }, ] const teams = [ { id: 1, name: 'Planetaria', href: '#', initial: 'P', current: false }, { id: 2, name: 'Protocol', href: '#', initial: 'P', current: false }, { id: 3, name: 'Tailwind Labs', href: '#', initial: 'T', current: false }, ] const statuses = { offline: 'text-gray-500 bg-gray-100/10', online: 'text-green-400 bg-green-400/10', error: 'text-rose-400 bg-rose-400/10', } const environments = { Preview: 'text-gray-400 bg-gray-400/10 ring-gray-400/20', Production: 'text-indigo-400 bg-indigo-400/10 ring-indigo-400/30', } const deployments = [ { id: 1, href: '#', projectName: 'ios-app', teamName: 'Planetaria', status: 'offline', statusText: 'Initiated 1m 32s ago', description: 'Deploys from GitHub', environment: 'Preview', }, // More deployments... ] const activityItems = [ { user: { name: 'Michael Foster', imageUrl: 'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', }, projectName: 'ios-app', commit: '2d89f0c8', branch: 'main', date: '1h', dateTime: '2023-01-23T11:00', }, // More items... ] function classNames(...classes) { return classes.filter(Boolean).join(' ') } export default function Example() { const [sidebarOpen, setSidebarOpen] = useState(false) return ( <> {/* This example requires updating your template: ``` ``` */}
{/* Sidebar component, swap this element with another sidebar if you like */}
Your Company
{/* Static sidebar for desktop */}
{/* Sidebar component, swap this element with another sidebar if you like */}
Your Company
{/* Sticky search header */}

Deployments

{/* Sort dropdown */} Sort by {({ active }) => ( Name )} {({ active }) => ( Date updated )} {({ active }) => ( Environment )}
{/* Deployment list */}
{/* Activity feed */}
) }