Dcode Design System

Admin: Calendar

No notes defined.

<header>
    <nav class="bg-white border-slate-200 border-b">
        <div class="mx-auto px-mdSpace sm:px-6 lg:px-lgSpace">
            <div class="flex h-20 justify-between">
                <div class="flex">
                    <div class="flex flex-shrink-0 items-center">
                        <img class="block h-8 w-auto lg:hidden" src="../../assets/kanopi.svg" alt="Your Company">
                        <img class="hidden h-8 w-auto lg:block" src="../../assets/kanopi.svg" alt="Your Company">
                    </div>

                    <div class="hidden lg:flex">
                        <div class="rounded-md lg:ml-6 flex flex-row items-center">
                            <ul class="flex flex-row items-center">
                                <li>
                                    <a href="#" class="bg-tertiary-100 rounded-md text-tertiary-700 hover:text-tertiary-500 hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                                        Tickets
                                    </a>
                                </li>

                                <li class="relative">
                                    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                                        Projects
                                    </a>
                                </li>

                                <li class="relative">
                                    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                                        Clients
                                    </a>
                                </li>

                                <li>
                                    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                                        Timesheets
                                    </a>
                                </li>

                                <li>
                                    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                                        Reports
                                    </a>
                                </li>

                                <li>
                                    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                                        Invoices
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="hidden lg:ml-6 lg:flex lg:items-center">
                    <div class="hidden lg:ml-6 lg:flex lg:space-x-xsSpace">
                        <div class="rounded border border-tertiary-200 flex px-xsSpace py-xsSpace text-white items-center hover:bg-tertiary-200 cursor-pointer">
                            <span class="fill-current text-tertiary-700">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg> </span>
                        </div>

                    </div>

                    <!-- Profile dropdown -->
                    <div class="relative ml-3">
                        <div>
                            <button type="button" class="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                                <span class="sr-only">Open user menu</span>

                                <span class="font-semibold whitespace-nowrap text-tertiary-700 flex items-center space-x-smSpace px-smSpace py-xsSpace rounded-md leading-none text-sm">
                                    <span>Account Name</span>

                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                                    </svg>
                                </span>
                            </button>
                        </div>

                        <div class="absolute mt-xsSpace right-0">

                        </div>
                    </div>
                </div>

                <div class="flex items-center lg:hidden">
                    <button type="button" class="border border-tertiary-200 inline-flex items-center justify-center rounded-md p-xsSpace text-tertiary-600 hover:bg-tertiary-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
                        <span class="sr-only">Open main menu</span>

                        <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                        </svg>

                        <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            </div>

            <div id="mobile-menu" class="lg:hidden">
                <div class="flex flex-col my-mdSpace">
                    <a href="#" class="bg-tertiary-200 rounded-md hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                        Clients
                    </a>
                    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                        Projects
                    </a>
                    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                        Tickets
                    </a>
                    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                        Timesheets
                    </a>
                    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                        Reports
                    </a>
                    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                        Users
                    </a>
                    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                        Comments
                    </a>
                    <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                        Invoices
                    </a>
                </div>
            </div>
        </div>
    </nav>
</header>
<div class="container container--wide">
    <div class="space-y-xlSpace">
        <div class="flex">
            <div class="w-1/3">
                <div class="space-y-lgSpace">
                    <div class="flex items-center space-x-xsSpace text-sm font-medium justify-between">
                        <div>
                            <span>Backlog</span>

                            <span class="text-tertiary-500">3</span>
                        </div>

                        <div class="flex items-center">
                            <span class="w-xlSpace h-xlSpace flex items-center justify-center hover:bg-tertiary-100 rounded-lg cursor-pointer">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                                    <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
                                </svg>
                            </span>

                            <span class="-ml-1 w-xlSpace h-xlSpace flex items-center justify-center hover:bg-tertiary-100 rounded-lg cursor-pointer">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                                    <path d="M3 10a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM8.5 10a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM15.5 8.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" />
                                </svg> </span>
                        </div>
                    </div>

                    <div class="space-y-lgSpace">
                        <div class="shadow-lg ring-neutral-100 ring-1 rounded-md p-mdSpace">
                            <div class="space-y-smSpace">
                                <div class="space-y-mdSpace">
                                    <div class="flex flex-wrap items-center sm:space-x-xsSpace justify-between">
                                        <div class="flex items-center space-x-xsSpace justify-between">
                                            <span class="bg-error-500 fill-current text-white rounded-sm w-lgSpace h-lgSpace pr-xsSpace flex items-center justify-center">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                                                    <path fill-rule="evenodd" d="M6.56 1.14a.75.75 0 01.177 1.045 3.989 3.989 0 00-.464.86c.185.17.382.329.59.473A3.993 3.993 0 0110 2c1.272 0 2.405.594 3.137 1.518.208-.144.405-.302.59-.473a3.989 3.989 0 00-.464-.86.75.75 0 011.222-.869c.369.519.65 1.105.822 1.736a.75.75 0 01-.174.707 7.03 7.03 0 01-1.299 1.098A4 4 0 0114 6c0 .52-.301.963-.723 1.187a6.961 6.961 0 01-1.158.486c.13.208.231.436.296.679 1.413-.174 2.779-.5 4.081-.96a19.655 19.655 0 00-.09-2.319.75.75 0 111.493-.146 21.239 21.239 0 01.08 3.028.75.75 0 01-.482.667 20.874 20.874 0 01-5.153 1.249 2.51 2.51 0 01-.107.247 20.86 20.86 0 015.253 1.257.75.75 0 01.48.74 20.946 20.946 0 01-.907 5.107.75.75 0 01-1.433-.444c.415-1.34.69-2.743.806-4.19-.495-.174-1-.328-1.512-.461.05.284.076.575.076.873 0 1.814-.517 3.312-1.426 4.37A4.639 4.639 0 0110 19a4.64 4.64 0 01-3.574-1.63C5.516 16.311 5 14.813 5 13c0-.298.026-.59.076-.873-.513.133-1.017.287-1.512.46.116 1.448.39 2.85.806 4.191a.75.75 0 01-1.433.444 20.94 20.94 0 01-.908-5.107.75.75 0 01.482-.74 20.857 20.857 0 015.252-1.257 2.481 2.481 0 01-.107-.247 20.874 20.874 0 01-5.153-1.249.75.75 0 01-.482-.667 21.342 21.342 0 01.08-3.028.75.75 0 111.493.146 19.745 19.745 0 00-.09 2.32c1.302.459 2.668.785 4.08.959.066-.243.166-.471.297-.679a6.962 6.962 0 01-1.158-.486A1.348 1.348 0 016 6a4 4 0 01.166-1.143 7.032 7.032 0 01-1.3-1.098.75.75 0 01-.173-.707 5.48 5.48 0 01.822-1.736.75.75 0 011.046-.176z" clip-rule="evenodd" />
                                                </svg> </span>

                                            <div class="flex items-center text-sm">
                                                <span class="text-sm leading-none capsize">
                                                    #67
                                                </span>

                                                <span class="fill-current text-tertiary-300">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                                                        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
                                                    </svg> </span>

                                                <span class="text-sm leading-none capsize text-warning-500">
                                                    Important
                                                </span>
                                            </div>
                                        </div>

                                        <div class="flex items-center">
                                            <span class="w-xlSpace h-xlSpace flex items-center justify-center hover:bg-tertiary-100 rounded-lg cursor-pointer">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                                                </svg> </span>

                                            <span class="relative -ml-1 w-xlSpace h-xlSpace flex items-center justify-center hover:bg-tertiary-100 rounded-lg cursor-pointer">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
                                                </svg>

                                            </span>
                                        </div>
                                    </div>

                                    <p class="text-base leading-none capsize font-bold">
                                        Task title
                                    </p>

                                    <div class="flex items-start justify-between text-sm">
                                        <p class="text-base leading-none capsize">
                                            Client name
                                            </span>

                                        <div class="rounded-full w-xlSpace h-xlSpace bg-tertiary-200 relative flex items-center justify-center cursor-pointer transition-all ring-0 hover:ring-1 ring-neutral-500">
                                            <span class="text-xs font-bold tracking-widest">LH</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="py-lgSpace lg:py-xlSpace">
            <footer>
                <div class="flex justify-between">
                    <p class="small text-tertiary-300">&copy; 2022 Your Company, Inc. All rights reserved.</p>

                    <a href="#" class="btn-tertiary small">Built by Dcode</a>
                </div>
            </footer>
        </div>
    </div>

</div>
  • Content: 
    https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FJUMg9qwWNHgaiuoDoEgHkn%2Ffractal.dcodegroup.com%3Fnode-id%3D348%253A6407%26t%3DEhc304iBKWNCwFfN-1
  • URL: /components/raw/admin/figma.txt
  • Filesystem Path: components/05-templates/admin/figma.txt
  • Size: 183 Bytes