/* This example requires some changes to your config: ``` // tailwind.config.js module.exports = { // ... plugins: [ // ... require('@tailwindcss/forms'), ], } ``` */ import { Fragment, useState } from 'react' import { Dialog, Transition } from '@headlessui/react' import { ChartBarSquareIcon, Cog6ToothIcon, FolderIcon, GlobeAltIcon, ServerIcon, SignalIcon, XMarkIcon, } from '@heroicons/react/24/outline' import { Bars3Icon, 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 secondaryNavigation = [ { name: 'Overview', href: '#', current: true }, { name: 'Activity', href: '#', current: false }, { name: 'Settings', href: '#', current: false }, { name: 'Collaborators', href: '#', current: false }, { name: 'Notifications', href: '#', current: false }, ] const stats = [ { name: 'Number of deploys', value: '405' }, { name: 'Average deploy time', value: '3.65', unit: 'mins' }, { name: 'Number of servers', value: '3' }, { name: 'Success rate', value: '98.5%' }, ] const statuses = { Completed: 'text-green-400 bg-green-400/10', Error: 'text-rose-400 bg-rose-400/10' } 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', }, commit: '2d89f0c8', branch: 'main', status: 'Completed', duration: '25s', date: '45 minutes ago', 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 */}
{/* Secondary navigation */} {/* Heading */}

Planetaria / mobile-api

Deploys from GitHub via main branch

Production
{/* Stats */}
{stats.map((stat, statIdx) => (

{stat.name}

{stat.value} {stat.unit ? {stat.unit} : null}

))}
{/* Activity list */}

Latest activity

{activityItems.map((item) => ( ))}
User Commit Status Duration Deployed at
{item.user.name}
{item.commit}
{item.branch}
{item.status}
 {item.duration}
) }