@stacksjs/defaults 0.70.54

package/resources/components/Dashboard/Deployments/DeploymentHistory.stx

@@ -0,0 +1,97 @@
+<script>
+interface DeploymentHistoryProps {
+  deployments?: any[]
+}
+
+const { deployments = [] } = defineProps<DeploymentHistoryProps>()
+</script>
+<div class="pt-12 px-4 sm:px-6 lg:px-8">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="font-semibold leading-6 text-base text-gray-900">
+          Deployment History
+        </h1>
+        <p class="mt-2 text-gray-700 text-sm">
+          A list of all the <em>(zero-downtime)</em> deployments relating your project.
+        </p>
+      </div>
+      <div class="sm:flex-none mt-4 sm:ml-16 sm:mt-0">
+        <button type="button" class="block px-3 py-2 font-semibold text-center text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">
+          Deploy
+        </button>
+      </div>
+    </div>
+
+    <div class="flow-root mt-8">
+      <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+        <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+          <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+            <table class="min-w-full divide-gray-300 divide-y">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm">
+                    When
+                  </th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">
+                    Triggered By
+                  </th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">
+                    Commit
+                  </th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">
+                    Status
+                  </th>
+                  <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6">
+                    <span class="sr-only">Edit</span>
+                  </th>
+                </tr>
+              </thead>
+
+              <tbody class="bg-white divide-gray-200 divide-y">
+                <tr>
+                  <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap">
+                    Moments ago
+                  </td>
+                  <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="flex-shrink-0 h-10 w-10">
+                        <img src="https://avatars.githubusercontent.com/u/6228425?v=4" alt="" class="h-10 w-10 rounded-full">
+                      </div>
+                      <div class="ml-4">
+                        <div class="flex items-center font-medium text-gray-900 text-sm dark:text-neutral-100">
+                          Chris Breuer
+                        </div>
+                        <div class="text-gray-500 text-sm dark:text-neutral-300 dark:text-neutral-400">
+                          chris@stacksjs.com
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-3 py-4 font-mono text-gray-500 text-sm whitespace-nowrap">
+                    <div class="flex gap-x-3">
+                      <div class="font-mono text-gray-700 text-sm/6">
+                        <a href="github.com/stacksjs/stacks/commit/342afe5a" class="hover:text-gray-800 duration-150 ease-in-out transition">342afe5a</a>
+                      </div>
+                      <div class="px-2 py-1 font-medium text-gray-700 text-xs bg-gray-300/40 ring-1 ring-inset ring-white/10 rounded-md">main</div>
+                    </div>
+                  </td>
+                  <td class="pl-0 pr-4 py-4 sm:pr-8 lg:pr-20 text-sm/6">
+                    <div class="flex gap-x-2 items-center justify-end sm:justify-start">
+                      <time class="sm:hidden text-gray-400" datetime="2023-01-23T11:00">45 minutes ago</time>
+                      <div class="flex-none p-1 text-green-400 bg-green-400/10 rounded-full">
+                        <div class="size-1.5 bg-current rounded-full"></div>
+                      </div>
+                      <div class="hidden sm:block text-gray-900">Completed</div>
+                    </div>
+                  </td>
+                  <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                    <a href="#" class="text-blue-600 hover:text-blue-900" data-action="view">View<span class="sr-only">, Deployment</span></a>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>

package/resources/components/Dashboard/Deployments/DeploymentList.stx

@@ -0,0 +1,94 @@
+<script>
+interface DeploymentListProps {
+  showModal?: boolean
+}
+
+const { showModal = false } = defineProps<DeploymentListProps>()
+</script>
+<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
+    <div class="mb-8 px-4 sm:px-6 lg:px-8">
+      <div>
+        <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">
+          Last 30 days
+        </h3>
+
+        <dl class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-5">
+          <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+            <dt>
+              <div class="absolute p-3 bg-blue-500 rounded-md">
+                <div class="h-6 w-6 text-white i-hugeicons-rocket-01"></div>
+              </div>
+              <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-400">
+                Total Deployments
+              </p>
+            </dt>
+            <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+              <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">
+                71,897
+              </p>
+              <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm dark:text-green-400">
+                <svg class="flex-shrink-0 self-center h-5 w-5 text-green-500 dark:text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd"></path>
+                </svg>
+                <span class="sr-only"> Increased by </span>
+                122
+              </p>
+            </dd>
+          </div>
+
+          <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+            <dt>
+              <div class="absolute p-3 bg-blue-500 rounded-md">
+                <div class="h-6 w-6 text-white i-hugeicons-clock-01"></div>
+              </div>
+              <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-400">
+                Avg. Deploy Time
+              </p>
+            </dt>
+            <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+              <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">
+                3.65 mins
+              </p>
+              <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm dark:text-green-400">
+                <svg class="flex-shrink-0 self-center h-5 w-5 text-green-500 dark:text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd"></path>
+                </svg>
+                <span class="sr-only"> Increased by </span>
+                12 s
+              </p>
+            </dd>
+          </div>
+
+          <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+            <dt>
+              <div class="absolute p-3 bg-blue-500 rounded-md">
+                <div class="h-6 w-6 text-white i-hugeicons-checkmark-circle-02"></div>
+              </div>
+              <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-400">
+                Success Rate
+              </p>
+            </dt>
+            <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+              <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">
+                94.57%
+              </p>
+              <p class="flex items-baseline ml-2 font-semibold text-red-600 text-sm dark:text-red-400">
+                <svg class="flex-shrink-0 self-center h-5 w-5 text-red-500 dark:text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clip-rule="evenodd"></path>
+                </svg>
+                <span class="sr-only"> Decreased by </span>
+                3.2%
+              </p>
+            </dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+
+    <slot name="deployScript" />
+    <slot name="deploymentHistory" />
+  </div>
+
+  @if(showModal)
+    <slot name="modal" />
+  @endif

package/resources/components/Dashboard/Deployments/LiveTerminalOutput.stx

@@ -0,0 +1,18 @@
+<script>
+interface LiveTerminalOutputProps {
+  live?: boolean
+}
+
+const { live = true } = defineProps<LiveTerminalOutputProps>()
+</script>
+<div class="pt-12 px-4 sm:px-6 lg:px-8">
+    <div class="flow-root mt-8">
+      <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+        <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+          <div class="overflow-hidden">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>

package/resources/components/Dashboard/Elements/Dropdown.stx

@@ -0,0 +1,57 @@
+<script>
+interface DropdownProps {
+  label?: string
+  open?: boolean
+  elements?: any[]
+  id?: string
+}
+
+const { label = '', open = false, elements = [], id = 'dropdown-nav-' + Math.random().toString(36).slice(2, 11) } = defineProps<DropdownProps>()
+</script>
+<div ref="pageRoot" class="flex overflow-hidden flex-col gap-y-2" data-dropdown-nav="{{ id }}">
+  <a class="flex gap-x-2 items-center justify-between cursor-pointer" data-toggle>
+    <span class="font-medium text-dark text-sm">
+      {{ label }}
+    </span>
+
+    <span class="i-hugeicons-chevron-down" data-icon-closed></span>
+    <span class="hidden i-hugeicons-minus" data-icon-open></span>
+  </a>
+
+  <ul data-list class="{{ open ? '' : 'hidden' }}">
+    @foreach(elements as element)
+      <li>
+        <a href="{{ element.to }}" class="block">
+          {{ element.label }}
+        </a>
+      </li>
+    @endforeach
+  </ul>
+</div>
+<script client>
+var _root = useRef('pageRoot')
+onMount(function() {
+  var el = _root.current;
+  if (!el) return;
+  const nav = el
+
+  const toggle = nav.querySelector('[data-toggle]')
+  const list = nav.querySelector('[data-list]')
+  const iconClosed = nav.querySelector('[data-icon-closed]')
+  const iconOpen = nav.querySelector('[data-icon-open]')
+  let isOpen = {{ open ? 'true' : 'false' }}
+
+  function updateState() {
+    list.classList.toggle('hidden', !isOpen)
+    iconClosed.classList.toggle('hidden', isOpen)
+    iconOpen.classList.toggle('hidden', !isOpen)
+  }
+
+  toggle?.addEventListener('click', function() {
+    isOpen = !isOpen
+    updateState()
+  })
+
+  updateState()
+})
+</script>

package/resources/components/Dashboard/Email/EmailActivityChart.stx

@@ -0,0 +1,111 @@
+<script>
+interface EmailActivityChartProps {
+  timeRange?: 'day' | 'week' | 'month' | 'year'
+  isLoading?: boolean
+  chartOptions?: string
+}
+
+const { timeRange = 'day', isLoading = false, chartOptions = { } = defineProps<EmailActivityChartProps>()
+
+// Chart configuration - to be rendered client-side
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      y: {
+        beginAtZero: true,
+        grid: {
+          color: 'rgba(200, 200, 200, 0.1)',
+        },
+        ticks: {
+          color: 'rgb(156, 163, 175)',
+          font: {
+            family: "'JetBrains Mono', monospace",
+          },
+        },
+      },
+      x: {
+        grid: {
+          display: false,
+        },
+        ticks: {
+          color: 'rgb(156, 163, 175)',
+          font: {
+            family: "'JetBrains Mono', monospace",
+          },
+        },
+      },
+    },
+    plugins: {
+      legend: {
+        display: true,
+        position: 'top',
+        align: 'end',
+        labels: {
+          color: 'rgb(156, 163, 175)',
+          font: {
+            family: "'JetBrains Mono', monospace",
+          },
+          boxWidth: 12,
+          padding: 15,
+        },
+      },
+      tooltip: {
+        mode: 'index',
+        intersect: false,
+      },
+    },
+  }
+</script>
+<div ref="pageRoot" class="p-4 bg-white dark:bg-neutral-700 border-b border-gray-200 dark:border-neutral-600">
+    <div class="flex items-center justify-between mb-2">
+      <h3 class="font-medium text-base text-gray-900 dark:text-neutral-100">Email Activity</h3>
+    </div>
+    <div class="relative h-[120px]">
+      @if(isLoading)
+        <div class="flex absolute inset-0 z-10 items-center justify-center bg-opacity-75 bg-white dark:bg-neutral-700 dark:bg-opacity-75">
+          <div class="h-8 w-8 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+        </div>
+      @endif
+      <!-- Chart canvas - requires client-side Chart.js initialization -->
+      <canvas id="emailActivityChart" data-chart-type="line" data-time-range="{{ timeRange }}"></canvas>
+    </div>
+  </div>
+<script client>
+  // Client-side chart initialization
+  var _root = useRef('pageRoot')
+  onMount(function() {
+    var el = _root.current;
+    if (!el) return;
+    const canvas = el.querySelector('#emailActivityChart');
+    if (canvas && typeof Chart !== 'undefined') {
+      const labels = Array.from({ length: 24 }, (_, i) => `${i}:00`);
+      const data = {
+        labels,
+        datasets: [
+          {
+            label: 'Received',
+            data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 50) + 20),
+            borderColor: 'rgb(59, 130, 246)',
+            backgroundColor: 'rgba(59, 130, 246, 0.1)',
+            fill: true,
+          },
+          {
+            label: 'Sent',
+            data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 30) + 10),
+            borderColor: 'rgb(16, 185, 129)',
+            backgroundColor: 'rgba(16, 185, 129, 0.1)',
+            fill: true,
+          },
+          {
+            label: 'Spam',
+            data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 10)),
+            borderColor: 'rgb(239, 68, 68)',
+            backgroundColor: 'rgba(239, 68, 68, 0.1)',
+            fill: true,
+          },
+        ],
+      };
+      new Chart(canvas, { type: 'line', data, options: {} });
+    }
+  });
+</script>

package/resources/components/Dashboard/Email/EmailCompose.stx

@@ -0,0 +1,72 @@
+<script>
+interface EmailComposeProps {
+  to?: string
+  subject?: string
+  body?: string
+}
+
+const { to = '', subject = '', body = '' } = defineProps<EmailComposeProps>()
+</script>
+<div class="flex flex-col w-full md:w-2/3 lg:w-3/5 bg-white dark:bg-neutral-700">
+    <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-neutral-600">
+      <h2 class="font-medium text-gray-900 text-lg dark:text-neutral-100">
+        New Message
+      </h2>
+      <button class="p-1 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded" data-action="cancel">
+        <i class="text-gray-500 text-lg dark:text-neutral-400 i-hugeicons-cancel-circle"></i>
+      </button>
+    </div>
+
+    <div class="overflow-y-auto flex-1 p-4">
+      <div class="space-y-4">
+        <div>
+          <label for="to" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">To</label>
+          <input
+            id="to"
+            name="to"
+            type="text"
+            value="{{ to }}"
+            class="block mt-1 w-full text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm"
+          >
+        </div>
+        <div>
+          <label for="subject" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Subject</label>
+          <input
+            id="subject"
+            name="subject"
+            type="text"
+            value="{{ subject }}"
+            class="block mt-1 w-full text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm"
+          >
+        </div>
+        <div>
+          <label for="body" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Message</label>
+          <textarea
+            id="body"
+            name="body"
+            rows="15"
+            class="block mt-1 w-full text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm"
+          >{{ body }}</textarea>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex justify-between p-4 border-gray-200 border-t dark:border-neutral-600">
+      <div class="flex space-x-2">
+        <button class="p-2 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded">
+          <i class="text-gray-500 text-lg dark:text-neutral-400 i-hugeicons-attachment-01"></i>
+        </button>
+        <button class="p-2 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded">
+          <i class="text-gray-500 text-lg dark:text-neutral-400 i-hugeicons-image-01"></i>
+        </button>
+        <button class="p-2 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded">
+          <i class="text-gray-500 text-lg dark:text-neutral-400 i-hugeicons-smile"></i>
+        </button>
+      </div>
+      <div>
+        <button type="submit" class="px-4 py-2 font-medium text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md" data-action="send">
+          Send
+        </button>
+      </div>
+    </div>
+  </div>

package/resources/components/Dashboard/Email/EmailDetail.stx

@@ -0,0 +1,105 @@
+<script>
+interface EmailDetailProps {
+  email?: string
+}
+
+const { email = { } = defineProps<EmailDetailProps>()
+
+id: 0,
+    from: '',
+    email: '',
+    subject: '',
+    preview: '',
+    body: '',
+    date: '',
+    read: false,
+    starred: false,
+    folder: 'inbox',
+    attachment: false
+  }
+</script>
+<div class="flex flex-col w-full md:w-2/3 lg:w-3/5 bg-white dark:bg-neutral-700">
+    <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-neutral-600">
+      <div class="flex items-center space-x-2">
+        <button class="p-1 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded" data-action="close">
+          <i class="text-gray-500 text-lg dark:text-neutral-400 i-hugeicons-arrow-left-02"></i>
+        </button>
+        <h2 class="font-medium text-gray-900 text-lg dark:text-neutral-100">
+          {{ email.subject }}
+        </h2>
+      </div>
+      <div class="flex space-x-2">
+        <button class="p-1 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded" data-action="toggle-star" data-email-id="{{ email.id }}">
+          @if(email.starred)
+            <span class="text-lg text-yellow-400">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+                <path d="M13.7276 3.44418L15.4874 6.99288C15.7274 7.48687 16.3673 7.9607 16.9073 8.05143L20.0969 8.58575C22.1367 8.92853 22.6167 10.4206 21.1468 11.8925L18.6671 14.3927C18.2471 14.8161 18.0172 15.6327 18.1471 16.2175L18.8571 19.3125C19.417 21.7623 18.1271 22.71 15.9774 21.4296L12.9877 19.6452C12.4478 19.3226 11.5579 19.3226 11.0079 19.6452L8.01827 21.4296C5.8785 22.71 4.57865 21.7522 5.13859 19.3125L5.84851 16.2175C5.97849 15.6327 5.74852 14.8161 5.32856 14.3927L2.84884 11.8925C1.389 10.4206 1.85895 8.92853 3.89872 8.58575L7.08837 8.05143C7.61831 7.9607 8.25824 7.48687 8.49821 6.99288L10.258 3.44418C11.2179 1.51861 12.7777 1.51861 13.7276 3.44418Z"/>
+              </svg>
+            </span>
+          @else
+            <i class="text-gray-500 text-lg dark:text-neutral-400 i-hugeicons-star"></i>
+          @endif
+        </button>
+        <button class="p-1 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded">
+          <i class="text-gray-500 text-lg dark:text-neutral-400 i-hugeicons-inbox"></i>
+        </button>
+        <button class="p-1 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded">
+          <i class="text-gray-500 text-lg dark:text-neutral-400 i-hugeicons-waste"></i>
+        </button>
+      </div>
+    </div>
+
+    <div class="px-4 py-3 border-b border-gray-200 dark:border-neutral-600">
+      <div class="flex items-start justify-between">
+        <div>
+          <div class="flex items-center">
+            <div class="flex items-center justify-center h-10 w-10 font-medium text-blue-700 bg-blue-100 rounded-full">
+              {{ email.from.charAt(0) }}
+            </div>
+            <div class="ml-3">
+              <p class="font-medium text-gray-900 text-sm dark:text-neutral-100">{{ email.from }}</p>
+              <p class="text-gray-500 text-xs dark:text-neutral-400">{{ email.email }}</p>
+            </div>
+          </div>
+        </div>
+        <div class="text-gray-500 text-xs dark:text-neutral-400">
+          {{ email.date }}
+        </div>
+      </div>
+      <div class="mt-2">
+        <p class="font-medium text-base text-gray-900 dark:text-neutral-100">{{ email.subject }}</p>
+      </div>
+    </div>
+
+    <div class="overflow-y-auto flex-1 p-4">
+      <div class="max-w-none prose dark:prose-invert">
+        {!! email.body !!}
+      </div>
+
+      @if(email.attachment)
+        <div class="mt-4 p-3 border border-gray-200 rounded dark:border-neutral-600">
+          <div class="flex items-center">
+            <i class="text-gray-500 text-xl dark:text-neutral-400 i-hugeicons-file-01"></i>
+            <div class="ml-3">
+              <p class="font-medium text-gray-900 text-sm dark:text-neutral-100">Document.pdf</p>
+              <p class="text-gray-500 text-xs dark:text-neutral-400">1.2 MB</p>
+            </div>
+            <button class="ml-auto p-1 text-blue-700 dark:text-blue-100 bg-blue-100 dark:bg-blue-900 hover:bg-blue-200 dark:hover:bg-blue-800 rounded">
+              <i class="text-lg i-hugeicons-download-04"></i>
+            </button>
+          </div>
+        </div>
+      @endif
+    </div>
+
+    <div class="p-4 border-gray-200 border-t dark:border-neutral-600">
+      <div class="flex space-x-2">
+        <button class="px-4 py-2 font-medium text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md">
+          Reply
+        </button>
+        <button class="px-4 py-2 font-medium text-gray-700 text-sm dark:text-neutral-200 hover:bg-gray-50 dark:hover:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600">
+          Forward
+        </button>
+      </div>
+    </div>
+  </div>