-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: new dashboard + kanban example (#40)
- Loading branch information
Showing
3 changed files
with
183 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
--- | ||
title: "Dashboard" | ||
title: "Dashboard-01" | ||
--- | ||
|
||
<div class="w-full"> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,181 @@ | ||
--- | ||
title: "Dashboard-02" | ||
navbar: | ||
- logo: "kanban" | ||
items: ["home", "layout", "folder", "users"] | ||
- logo: "" | ||
items: ["tool"] | ||
kanban: | ||
- title: "To Do" | ||
color: "bg-neutral-500" | ||
tasks: | ||
- title: "Redesign About" | ||
description: "We have to redesign the About page, and include the new team members." | ||
tags: ["design", "marketing"] | ||
comments_count: 3 | ||
- title: "Refactor main components" | ||
tags: ["design"] | ||
description: "We have to refactor the main components of the website to match new version 2.4." | ||
comments_count: 5 | ||
- title: "In Progress" | ||
color: "bg-blue-500" | ||
tasks: | ||
- title: "Create new landing page" | ||
tags: ["design", "marketing"] | ||
description: "We have to create a new landing page for the new product." | ||
comments_count: 2 | ||
- title: "Update pricing page" | ||
tags: ["design"] | ||
description: "We have to update the pricing page with the new prices." | ||
comments_count: 1 | ||
- title: "Move FAQ" | ||
tags: ["design"] | ||
description: "Client has decied to move the FAQ section to the About page." | ||
comments_count: 5 | ||
- title: "Branding" | ||
tags: ["design", "marketing"] | ||
description: "Update the branding with the new colors." | ||
comments_count: 12 | ||
- title: "Review" | ||
color: "bg-yellow-500" | ||
tasks: | ||
- title: "Update footer" | ||
tags: ["design", "marketing"] | ||
description: "We have to update the footer with the new social media links." | ||
comments_count: 3 | ||
- title: "Update header" | ||
tags: ["design"] | ||
description: "We have to update the header with the new logo." | ||
comments_count: 2 | ||
- title: "Home Page bug fixes" | ||
tags: ["bug"] | ||
description: "We found some bugs in the home page. List attached on ticket." | ||
comments_count: 10 | ||
- title: "Done" | ||
color: "bg-green-500" | ||
tasks: | ||
- title: "Update blog" | ||
tags: ["design", "marketing"] | ||
description: "We have to update the blog with the new articles." | ||
comments_count: 4 | ||
- title: "Update contact page" | ||
tags: ["design"] | ||
description: "We have to update the contact page with the new contact information." | ||
comments_count: 2 | ||
--- | ||
|
||
<div class="w-full flex flex-col gap-4 bg-neutral-50 relative py-4 pl-20 pr-4"> | ||
<!-- Sidebar --> | ||
<div class="bg-white w-16 absolute top-0 bottom-0 left-0 z-10 border-r border-neutral-200 flex flex-col justify-between"> | ||
{{#each navbar}} | ||
<div class="flex flex-col gap-1 px-2 py-4"> | ||
{{#if logo}} | ||
<a class="flex items-center justify-center text-white bg-neutral-950 rounded-full py-3 text-2xl mb-4"> | ||
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#{{logo}}"></use></svg> | ||
</a> | ||
{{/if}} | ||
{{#each items}} | ||
<a class="flex items-center justify-center text-neutral-800 hover:text-neutral-950 hover:bg-neutral-100 rounded-xl py-3 text-xl cursor-pointer"> | ||
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#{{.}}"></use></svg> | ||
</a> | ||
{{/each}} | ||
</div> | ||
{{/each}} | ||
</div> | ||
<!-- Header --> | ||
<div class="w-full flex items-center justify-between mb-6"> | ||
<div class="flex items-center gap-2"> | ||
<div class="text-neutral-700 hover:text-neutral-900 cursor-pointer hover:underline">Projects</div> | ||
<div class="text-neutral-500"> | ||
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#chevron-right"></use></svg> | ||
</div> | ||
<div class="text-neutral-700 hover:text-neutral-900 cursor-pointer hover:underline">ABCD Corp.</div> | ||
<div class="text-neutral-500"> | ||
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#chevron-right"></use></svg> | ||
</div> | ||
<div class="text-neutral-950">Website</div> | ||
</div> | ||
<div class="relative group"> | ||
<button class="flex items-center justify-center rounded-full border border-neutral-200 h-8 w-8 cursor-pointer text-neutral-900 text-lg bg-white"> | ||
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#user"></use></svg> | ||
</button> | ||
<div class="absolute hidden group-focus-within:block top-full right-0 mt-1"> | ||
<div class="border border-neutral-200 p-1 rounded-lg bg-white text-sm shadow-sm w-40 select-none"> | ||
<a class="flex items-center hover:bg-neutral-100 px-2 py-1 rounded-md font-medium cursor-pointer">Profile</a> | ||
<a class="flex items-center hover:bg-neutral-100 px-2 py-1 rounded-md font-medium cursor-pointer">Settings</a> | ||
<a class="flex items-center hover:bg-neutral-100 px-2 py-1 rounded-md font-medium cursor-pointer">Contact Support</a> | ||
<div class="w-full h-px bg-neutral-200 my-1"></div> | ||
<a class="flex items-center hover:bg-neutral-100 px-2 py-1 rounded-md font-medium cursor-pointer">Logout</a> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<!-- Description --> | ||
<div class="w-full"> | ||
<div class="text-neutral-950 text-2xl font-bold">Website</div> | ||
<div class="text-neutral-500 text-sm">This is the main project for the website of ABCD Corp.</div> | ||
</div> | ||
<!-- Filters and views --> | ||
<div class="w-full flex items-center justify-between gap-4 select-none mt-3"> | ||
<div class="flex items-center gap-1 p-1 bg-neutral-100 rounded-lg border border-neutral-200"> | ||
<div class="bg-white text-neutral-900 font-medium text-xs px-2 py-1 rounded-md shadow-sm">Kanban</div> | ||
<div class="cursor-pointer hover:bg-white text-neutral-700 text-xs px-2 py-1 rounded-md">List</div> | ||
<div class="cursor-pointer hover:bg-white text-neutral-700 text-xs px-2 py-1 rounded-md">Calendar</div> | ||
</div> | ||
<div class="flex items-center gap-2"> | ||
<div class="relative"> | ||
<div class="absolute top-0 left-0 text-neutral-500 text-base px-2 py-2"> | ||
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#search"></use></svg> | ||
</div> | ||
<input type="text" class="border-0 bg-white py-1 pr-2 pl-8 border border-neutral-200 rounded-lg bg-white text-sm" placeholder="Search for a task..." /> | ||
</div> | ||
<div class="flex items-center justify-center gap-1 bg-white hover:bg-neutral-100 text-900 rounded-lg px-3 py-1 border border-neutral-200 cursor-pointer"> | ||
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#filter"></use></svg> | ||
<div class="text-sm font-medium">Filter</div> | ||
</div> | ||
<div class="flex items-center justify-center gap-1 bg-white hover:bg-neutral-100 text-900 rounded-lg px-3 py-1 border border-neutral-200 cursor-pointer"> | ||
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#download"></use></svg> | ||
<div class="text-sm font-medium">Export</div> | ||
</div> | ||
</div> | ||
</div> | ||
<!-- Main content --> | ||
<div class="w-full grid grid-cols-4 gap-4 items-start mb-16"> | ||
{{#each kanban}} | ||
<div class="w-full flex flex-col gap-2"> | ||
<div class="flex items-center gap-2"> | ||
<div class="flex {{color}} rounded-full w-3 h-3"></div> | ||
<div class="text-neutral-700 font-bold">{{title}}</div> | ||
</div> | ||
<div class="cursor-pointer w-full bg-white hover:bg-neutral-100 rounded-lg border border-neutral-200 flex items-center gap-1 justify-center py-2 px-2"> | ||
<div class="text-base"> | ||
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#plus"></use></svg> | ||
</div> | ||
<div class="text-sm font-medium">Add task</div> | ||
</div> | ||
{{#each tasks}} | ||
<div class="w-full bg-white rounded-lg border border-neutral-200 p-4"> | ||
<div class="text-neutral-900 font-medium mb-1">{{title}}</div> | ||
<div class="text-neutral-500 text-xs">{{description}}</div> | ||
<div class="flex items-center gap-1 mt-4"> | ||
<div class="flex items-center gap-1"> | ||
{{#each tags}} | ||
<div class="text-2xs bg-neutral-100 text-neutral-600 px-2 py-1 rounded-full"> | ||
<span>{{.}}</span> | ||
</div> | ||
{{/each}} | ||
</div> | ||
<div class="ml-auto flex items-center gap-1 text-neutral-500"> | ||
<div class="text-sm"> | ||
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#message-dots"></use></svg> | ||
</div> | ||
<div class="text-xs">{{comments_count}}</div> | ||
</div> | ||
</div> | ||
</div> | ||
{{/each}} | ||
</div> | ||
{{/each}} | ||
</div> | ||
</div> | ||
|