No notes defined.
<div class="activity">
<div class="activity__user--avatar">
<span>AB</span>
</div>
<div class="content">
<div class="content__text">
<textarea class="content__text--textarea focus:ring-0" rows="2" placeholder="Add your comment..."></textarea>
</div>
<div class="content__action">
<div class="content__action-attachment">
<div class="flex items-center">
<button type="button" class="-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="flex items-center">
<button type="button" class="-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500">
<svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.536-4.464a.75.75 0 10-1.061-1.061 3.5 3.5 0 01-4.95 0 .75.75 0 00-1.06 1.06 5 5 0 007.07 0zM9 8.5c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S7.448 7 8 7s1 .672 1 1.5zm3 1.5c.552 0 1-.672 1-1.5S12.552 7 12 7s-1 .672-1 1.5.448 1.5 1 1.5z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<button type="submit" class="content__action-button">Send</button>
</div>
</div>
</div>
<div class="activity activity--min">
<div class="activity__line">
<div></div>
</div>
<div class="activity__user">
</div>
<div class="content">
<div class="content__status">
<div class="content__status--meta">
<a href="#" class="font-medium text-gray-900">Thanh Nguyen</a> change status to <span class="font-medium text-gray-900"> In Progress</span>
</div>
<div class="content__status--time">45mins ago</div>
</div>
</div>
</div>
<div class="activity activity--min">
<div class="activity__line">
<div></div>
</div>
<div class="activity__user">
</div>
<div class="content">
<div class="content__status">
<div class="content__status--meta">
<a href="#" class="font-medium text-gray-900">Thanh Nguyen</a> change status to <span class="font-medium text-gray-900"> In Progress</span>
</div>
<div class="content__status--time">45mins ago</div>
</div>
</div>
</div>
<div class="activity activity--min">
<div class="activity__line">
<div></div>
</div>
<div class="activity__user">
</div>
<div class="content">
<div class="content__status">
<div class="content__status--meta">
<a href="#" class="font-medium text-gray-900">Thanh Nguyen</a> change status to <span class="font-medium text-gray-900"> In Progress</span>
</div>
<div class="content__status--time">45mins ago</div>
</div>
</div>
</div>
<div class="activity activity--min">
<div class="activity__user activity__user--avatar">
<span>AB</span>
</div>
<div class="content">
<div class="content__status">
<div class="content__status--meta">
<a href="#" class="font-medium text-gray-900">Thanh Nguyen</a> add a note
</div>
<div class="content__status--time">1 ago</div>
</div>
<div class="content__comment">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
.activity {
@apply flex gap-x-3;
.activity__user--avatar {
@apply flex h-lgSpace w-lgSpace cursor-pointer items-center justify-center rounded-full bg-gray-600 ring-0 ring-neutral-500;
span {
@apply justify-center text-xs tracking-widest text-white;
}
}
.content {
@apply relative flex-auto;
.content__text {
@apply overflow-hidden rounded-lg pb-12 shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-indigo-600;
.content__text--textarea {
@apply block w-full resize-none border-0 bg-transparent py-1.5 text-gray-900 placeholder:text-gray-400 sm:text-sm sm:leading-6;
}
}
.content__action {
@apply absolute inset-x-0 bottom-0 flex justify-between py-xsSpace pl-smSpace pr-xsSpace;
.content__action-attachment {
@apply flex items-center space-x-5 pl-smSpace;
}
.content__action-button {
@apply rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
}
}
}
&--min {
@apply mt-smSpace px-xsSpace relative;
.activity__line {
@apply absolute left-px top-5 -bottom-smSpace flex w-6 justify-center;
div {
@apply w-px bg-gray-200;
}
}
.activity__user {
@apply flex h-2.5 w-2.5 cursor-pointer items-center justify-center rounded-full bg-green-600 ring-0 ring-neutral-500 mt-1.5;
}
.activity__user--avatar {
@apply flex h-lgSpace w-lgSpace cursor-pointer items-center justify-center rounded-full bg-gray-600 ring-0 ring-neutral-500 -ml-1.5 mt-0;
span {
@apply justify-center text-xs tracking-widest text-white;
}
}
.content {
@apply relative flex-auto;
.content__status {
@apply flex min-w-0 flex-1 justify-between space-x-4 text-gray-500 text-sm py-0.5;
.content__status--meta {
}
.content__status--time {
@apply whitespace-nowrap text-right;
}
}
.content__comment {
@apply mt-2xsSpace text-sm text-gray-700 px-1;
}
}
}
}
title: Activity Log
status: wip
variants:
- name: default
label: Activity Log