npm - @stacksjs/defaults - Versions diffs - 0.70.54 - Mend

@stacksjs/defaults 0.70.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (286) hide show

package/resources/components/Email/EmailLayout.stx ADDED Viewed

@@ -0,0 +1,55 @@
+<script server>
+// Outermost email scaffold (stacksjs/stacks#1901 B1).
+//
+// Wraps content in the table-based body that Outlook + Gmail (Android)
+// require, plus the standard meta block (charset / viewport /
+// X-UA-Compatible / colour-scheme). Two-tone bodyBg / contentBg
+// mirrors the bundled templates: muted page colour outside, white
+// card inside. Named slots: head / header / footer. See README for
+// usage examples.
+//
+// Notes on `defineProps()`: stx fills missing props with an empty
+// string (not `undefined`), so destructure defaults silently no-op
+// for absent props. Use `props.x || fallback` instead — that's the
+// pattern used elsewhere in the bundled email templates.
+interface EmailLayoutProps {
+  title?: string
+  width?: number | string
+  bodyBg?: string
+  contentBg?: string
+}
+const props = defineProps<EmailLayoutProps>()
+const title = props.title || ''
+const width = props.width || 600
+const bodyBg = props.bodyBg || '#f4f4f5'
+const contentBg = props.contentBg || '#ffffff'
+</script>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="color-scheme" content="light dark">
+  <meta name="supported-color-schemes" content="light dark">
+  <title>{{ title }}</title>
+  <slot name="head" />
+</head>
+<body style="margin:0;padding:0;background-color:{{ bodyBg }};font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.6;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
+  <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;background-color:{{ bodyBg }};">
+    <tr>
+      <td align="center" style="padding:40px 20px;">
+        <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="max-width:{{ width }}px;width:100%;background-color:{{ contentBg }};border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.1);">
+          <slot name="header" />
+          <tr><td style="padding:40px;">
+            <slot />
+          </td></tr>
+          <slot name="footer" />
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>

package/resources/components/Email/EmailLink.stx ADDED Viewed

@@ -0,0 +1,22 @@
+<script server>
+// Inline email link (stacksjs/stacks#1901 B1).
+//
+// For inline mentions inside paragraphs / sentences — use
+// `<EmailButton>` for CTAs. The brand colour is set explicitly
+// because Gmail / Outlook ignore `<style>` blocks, so unstyled
+// `<a>` falls back to client-default blue / purple.
+interface EmailLinkProps {
+  href: string
+  color?: string
+  underline?: boolean
+}
+const props = defineProps<EmailLinkProps>()
+const href = props.href || '#'
+const color = props.color || '#3451b2'
+const underline = props.underline === false ? false : true
+const decoration = underline ? 'underline' : 'none'
+</script>
+<a href="{{ href }}" style="color:{{ color }};text-decoration:{{ decoration }};">
+  <slot />
+</a>

package/resources/components/Email/EmailSection.stx ADDED Viewed

@@ -0,0 +1,20 @@
+<script server>
+// Email content section (stacksjs/stacks#1901 B1) — a table row used
+// to group content vertically. Stack several to split an email into
+// header / body / CTA / footer blocks.
+interface EmailSectionProps {
+  padding?: string
+  background?: string
+}
+const props = defineProps<EmailSectionProps>()
+const padding = props.padding || '0'
+const background = props.background || 'transparent'
+</script>
+<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;background-color:{{ background }};">
+  <tr>
+    <td style="padding:{{ padding }};">
+      <slot />
+    </td>
+  </tr>
+</table>

package/resources/components/Email/EmailText.stx ADDED Viewed

@@ -0,0 +1,30 @@
+<script server>
+// Email paragraph (stacksjs/stacks#1901 B1).
+//
+// Wraps text in a paragraph with normalised line-height + colour,
+// and a `size` enum covering the 80% case (sm / md / lg / heading).
+// For arbitrary styling override `color` / `spacing` directly.
+interface EmailTextProps {
+  align?: 'left' | 'center' | 'right'
+  size?: 'sm' | 'md' | 'lg' | 'heading'
+  color?: string
+  spacing?: string
+}
+const props = defineProps<EmailTextProps>()
+const align = props.align || 'left'
+const size = props.size || 'md'
+const color = props.color || (size === 'heading' ? '#111827' : '#4b5563')
+const spacing = props.spacing || '16px'
+const sizeStyles: Record<string, string> = {
+  sm: 'font-size:14px;line-height:1.5;',
+  md: 'font-size:16px;line-height:1.6;',
+  lg: 'font-size:18px;line-height:1.6;',
+  heading: 'font-size:20px;line-height:1.4;font-weight:600;',
+}
+const sizeStyle = sizeStyles[size] || sizeStyles.md
+</script>
+<p style="margin:0 0 {{ spacing }} 0;text-align:{{ align }};color:{{ color }};{{ sizeStyle }}">
+  <slot />
+</p>

package/resources/components/Forum/ForumBreadcrumb.stx ADDED Viewed

@@ -0,0 +1,38 @@
+<script>
+interface ForumBreadcrumbProps {
+  items?: any[]
+}
+const { items = [] } = defineProps<ForumBreadcrumbProps>()
+</script>
+<div class="mb-4">
+  <nav class="flex" aria-label="Breadcrumb">
+    <ol class="inline-flex items-center space-x-1 md:space-x-2">
+      @foreach(items as item)
+        <li class="inline-flex items-center">
+          @if(loop.index > 0)
+            <div class="flex items-center">
+              <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
+              </svg>
+            </div>
+          @endif
+          @if(item.link)
+            <a
+              href="{{ item.link }}"
+              class="font-medium text-gray-700 text-sm hover:text-blue-600 : ? '' 'ml-1' {{ }} > 0 loop.index"
+            >
+              {{ item.label }}
+            </a>
+          @else
+            <span
+              class="font-medium text-gray-500 text-sm : ? '' 'ml-1' {{ }} > 0 loop.index"
+            >
+              {{ item.label }}
+            </span>
+          @endif
+        </li>
+      @endforeach
+    </ol>
+  </nav>
+</div>

package/resources/components/Forum/ForumCategory.stx ADDED Viewed

@@ -0,0 +1,16 @@
+<script>
+interface ForumCategoryProps {
+  title?: string
+}
+const { title = '' } = defineProps<ForumCategoryProps>()
+</script>
+<div class="mb-8">
+    <div class="flex items-center px-4 py-3 bg-gray-100 rounded-t-md">
+      <h2 class="font-bold text-lg">{{ title }}</h2>
+    </div>
+    <div class="border divide-y rounded-b-md">
+      <slot />
+    </div>
+  </div>

package/resources/components/Forum/ForumCategoryItem.stx ADDED Viewed

@@ -0,0 +1,46 @@
+<script>
+interface ForumCategoryItemProps {
+  title?: string
+  description?: string
+  link?: string
+  topicCount?: number
+  postCount?: number
+  icon?: string
+  latestTopic?: any
+}
+const { title = '', description = '', link = '', topicCount = 0, postCount = 0, icon = 'i-hugeicons-chat', latestTopic = null } = defineProps<ForumCategoryItemProps>()
+</script>
+<div class="flex items-start p-4 hover:bg-gray-50">
+    <div class="flex-shrink-0 mr-4">
+      <div class="flex items-center justify-center h-10 w-10 text-gray-500 bg-gray-100 rounded-full {{ }} icon"></div>
+    </div>
+    <div class="flex-grow min-w-0">
+      <h3 class="font-medium">
+        <a href="{{ link }}" class="text-primary hover:underline">{{ title }}</a>
+      </h3>
+      <p class="mt-1 text-gray-600 text-sm">{{ description }}</p>
+      <div class="flex gap-4 items-center mt-2 text-gray-500 text-xs">
+        <div class="flex gap-1 items-center">
+          <div class="i-hugeicons-file"></div>
+          <span>{{ topicCount }} topics</span>
+        </div>
+        <div class="flex gap-1 items-center">
+          <div class="i-hugeicons-chat"></div>
+          <span>{{ postCount }} posts</span>
+        </div>
+      </div>
+    </div>
+    @if(latestTopic)
+      <div class="flex-shrink-0 ml-4 text-right">
+        <a href="{{ latestTopic.link }}" class="font-medium line-clamp-1 text-primary text-sm hover:underline">{{ latestTopic.title }}</a>
+        <div class="mt-1 text-gray-500 text-xs">
+          {{ latestTopic.timeAgo }} by
+          <a href="{{ latestTopic.authorLink }}" class="hover:underline">{{ latestTopic.author }}</a>
+        </div>
+      </div>
+    @endif
+  </div>

package/resources/components/Forum/ForumLayout.stx ADDED Viewed

@@ -0,0 +1,36 @@
+<script>
+interface ForumLayoutProps {
+  route?: string
+}
+const { route = 'forum' } = defineProps<ForumLayoutProps>()
+function isActiveRoute(currentRoute, targetRoute) {
+  return currentRoute === targetRoute
+}
+</script>
+<div class="container mx-auto px-4 py-8">
+    <header class="mb-6">
+      <div class="flex items-center justify-between mb-4">
+        <h1 class="font-bold text-2xl">Stacks Community</h1>
+        <div class="flex gap-2 items-center">
+          <a href="/forum/new-topic" class="px-4 py-2 text-white bg-primary rounded-md hover:opacity-90">New Topic</a>
+          <a href="#" class="px-4 py-2 hover:bg-gray-100 border border-gray-300 rounded-md">Sign In</a>
+        </div>
+      </div>
+      <nav class="flex gap-1 text-sm">
+        <a href="/forum" class="px-3 py-2 font-medium' 'hover:bg-gray-100 rounded-md rounded-md' : ? 'bg-gray-100 'forum') {{ }} isActiveRoute(route,">All Discussions</a>
+        <a href="/forum?filter=popular" class="px-3 py-2 font-medium' 'hover:bg-gray-100 rounded-md rounded-md' : ? 'bg-gray-100 'forum-popular') {{ }} isActiveRoute(route,">Popular</a>
+        <a href="/forum?filter=recent" class="px-3 py-2 font-medium' 'hover:bg-gray-100 rounded-md rounded-md' : ? 'bg-gray-100 'forum-recent') {{ }} isActiveRoute(route,">Recent</a>
+        <a href="/forum?filter=solved" class="px-3 py-2 font-medium' 'hover:bg-gray-100 rounded-md rounded-md' : ? 'bg-gray-100 'forum-solved') {{ }} isActiveRoute(route,">Solved</a>
+      </nav>
+    </header>
+    <main>
+      <slot />
+    </main>
+    <footer class="mt-12 py-6 text-center text-gray-500 text-sm border-t">
+      <p>Stacks Community Forum</p>
+    </footer>
+  </div>

package/resources/components/Forum/ForumPagination.stx ADDED Viewed

@@ -0,0 +1,39 @@
+<script>
+interface ForumPaginationProps {
+  currentPage?: number
+  totalPages?: number
+  pages?: any[]
+}
+const { currentPage = 1, totalPages = 1, pages = [] } = defineProps<ForumPaginationProps>()
+</script>
+<div class="flex items-center justify-center mt-8">
+    <nav class="flex gap-1 items-center">
+      <a
+        href="#"
+        class="flex items-center justify-center h-10 w-10 hover:bg-gray-100 border rounded-md cursor-not-allowed' : ? '' 'opacity-50 {{ }} == 1 currentPage"
+        data-action="prev-page"
+      >
+        <span class="i-hugeicons-arrow-left"></span>
+      </a>
+      @foreach(pages as page)
+        <a
+          href="#"
+          class="flex items-center justify-center h-10 w-10 text-white' hover:bg-gray-100' rounded-md : ? 'bg-primary 'border {{ }} == currentPage page"
+          data-action="go-to-page"
+          data-page="{{ page }}"
+        >
+          {{ page }}
+        </a>
+      @endforeach
+      <a
+        href="#"
+        class="flex items-center justify-center h-10 w-10 hover:bg-gray-100 border rounded-md cursor-not-allowed' : ? '' 'opacity-50 {{ }} == currentPage totalPages"
+        data-action="next-page"
+      >
+        <span class="i-hugeicons-arrow-right"></span>
+      </a>
+    </nav>
+  </div>

package/resources/components/Forum/ForumPost.stx ADDED Viewed

@@ -0,0 +1,71 @@
+<script>
+interface ForumPostProps {
+  id?: string
+  authorName?: string
+  authorAvatar?: string
+  createdAt?: string
+  likeCount?: number
+  isOriginalPost?: boolean
+  title?: string
+  isSolved?: boolean
+}
+const { id = '', authorName = '', authorAvatar = '', createdAt = '', likeCount = 0, isOriginalPost = false, title = '', isSolved = false } = defineProps<ForumPostProps>()
+</script>
+<div id="post-{{ id }}" class="mb-6 border rounded-md">
+  <div class="flex items-center justify-between px-4 py-3 bg-gray-50 rounded-t-md">
+    <div class="flex gap-2 items-center">
+      <img src="{{ authorAvatar }}" alt="{{ authorName }}" class="h-6 w-6 rounded-full">
+      <span class="font-medium">{{ authorName }}</span>
+      <span class="text-gray-500 text-xs">{{ createdAt }}</span>
+    </div>
+    <div class="flex gap-2 items-center">
+      @if(isOriginalPost)
+        <button class="px-2 py-1 text-xs hover:bg-gray-100 border rounded" data-action="bookmark">
+          <span class="mr-1 i-hugeicons-bookmark"></span>
+          Bookmark
+        </button>
+      @endif
+      <button class="px-2 py-1 text-xs hover:bg-gray-100 border rounded" data-action="share">
+        <span class="mr-1 i-hugeicons-share"></span>
+        Share
+      </button>
+    </div>
+  </div>
+  <div class="p-4">
+    @if(isOriginalPost)
+      <h1 class="mb-4 font-bold text-xl">{{ title }}</h1>
+    @endif
+    <div class="max-w-none prose">
+      <slot />
+    </div>
+  </div>
+  <div class="flex items-center justify-between px-4 py-3 bg-gray-50 rounded-b-md">
+    <div class="flex gap-3 items-center text-gray-500">
+      <button class="flex gap-1 items-center hover:text-primary" data-action="like" data-post-id="{{ id }}">
+        <span class="i-hugeicons-heart"></span>
+        <span>{{ likeCount }}</span>
+      </button>
+      <button class="flex gap-1 items-center hover:text-primary" data-action="reply" data-post-id="{{ id }}">
+        <span class="i-hugeicons-chat"></span>
+        <span>Reply</span>
+      </button>
+    </div>
+    <div class="flex gap-2 items-center">
+      @if(isOriginalPost && !isSolved)
+        <button class="px-2 py-1 text-dark text-xs bg-success rounded hover:opacity-90" data-action="mark-solution" data-post-id="{{ id }}">
+          Mark as Solution
+        </button>
+      @endif
+      <button class="px-2 py-1 text-xs hover:bg-gray-100 border rounded" data-action="report" data-post-id="{{ id }}">
+        <span class="mr-1 i-hugeicons-flag"></span>
+        Report
+      </button>
+    </div>
+  </div>
+</div>

package/resources/components/Forum/ForumReplyForm.stx ADDED Viewed

@@ -0,0 +1,76 @@
+<script>
+interface ForumReplyFormProps {
+  replyContent?: string
+  notifyOnReply?: boolean
+}
+const { replyContent = '', notifyOnReply = true } = defineProps<ForumReplyFormProps>()
+function canSubmit(content) {
+  return content.trim().length > 0
+}
+</script>
+<div class="mb-6 border rounded-md">
+    <div class="flex items-center px-4 py-3 bg-gray-50 rounded-t-md">
+      <h3 class="font-medium">Post a Reply</h3>
+    </div>
+    <div class="p-4">
+      <div class="mb-4">
+        <div class="flex gap-2 mb-2">
+          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" title="Bold" data-action="format" data-format="bold">B</button>
+          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" title="Italic" data-action="format" data-format="italic">I</button>
+          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" title="Link" data-action="format" data-format="link">
+            <span class="i-hugeicons-link"></span>
+          </button>
+          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" title="Code" data-action="format" data-format="code">
+            <span class="i-hugeicons-code"></span>
+          </button>
+          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" title="Image" data-action="format" data-format="image">
+            <span class="i-hugeicons-image"></span>
+          </button>
+          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" title="Quote" data-action="format" data-format="quote">
+            <span class="i-hugeicons-quote"></span>
+          </button>
+          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" title="List" data-action="format" data-format="list">
+            <span class="i-hugeicons-list"></span>
+          </button>
+        </div>
+        <textarea
+          name="replyContent"
+          class="p-3 min-h-32 w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+          placeholder="Write your reply here..."
+        >{{ replyContent }}</textarea>
+        <div class="flex justify-between mt-1 text-gray-500 text-xs">
+          <span>Markdown formatting supported</span>
+          <span class="character-count">0 characters</span>
+        </div>
+      </div>
+      <div class="flex items-center justify-between">
+        <div class="flex gap-4 items-center">
+          <label class="flex items-center text-gray-600 text-sm">
+            <input type="checkbox" class="mr-2" name="notifyOnReply" {{ notifyOnReply ? 'checked' : '' }}>
+            Notify me of follow-up replies
+          </label>
+          <button class="text-gray-600 text-sm hover:text-primary" data-action="formatting-help">
+            Formatting Help
+          </button>
+        </div>
+        <div class="flex gap-2">
+          <button class="px-3 py-2 hover:bg-gray-100 border rounded-md" data-action="preview">
+            Preview
+          </button>
+          <button
+            class="px-4 py-2 text-white bg-primary rounded-md hover:opacity-90 cursor-not-allowed' : ? '' 'opacity-50 {{ }} canSubmit(replyContent)"
+            data-action="submit-reply"
+            {{ canSubmit(replyContent) ? '' : 'disabled' }}
+          >
+            Post Reply
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>

package/resources/components/Forum/ForumSidebar.stx ADDED Viewed

@@ -0,0 +1,86 @@
+<script>
+interface ForumSidebarProps {
+  stats?: string
+  popularTopics?: any[]
+  onlineUsers?: any[]
+}
+const { stats = {, popularTopics = [], onlineUsers = [] } = defineProps<ForumSidebarProps>()
+topics: 0,
+  posts: 0,
+  members: 0,
+  newestMember: ''
+}
+</script>
+<div class="space-y-6">
+    <!-- Search -->
+    <div class="p-4 border rounded-md">
+      <h3 class="mb-3 font-medium">Search</h3>
+      <div class="relative">
+        <input
+          type="text"
+          placeholder="Search topics..."
+          class="pl-3 pr-10 py-2 w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+          name="search"
+        >
+        <button class="absolute right-3 top-2" data-action="search">
+          <span class="i-hugeicons-search"></span>
+        </button>
+      </div>
+    </div>
+    <!-- Stats -->
+    <div class="p-4 border rounded-md">
+      <h3 class="mb-3 font-medium">Forum Stats</h3>
+      <div class="space-y-2">
+        <div class="flex justify-between">
+          <span class="text-gray-600">Topics:</span>
+          <span class="font-medium">{{ stats.topics }}</span>
+        </div>
+        <div class="flex justify-between">
+          <span class="text-gray-600">Posts:</span>
+          <span class="font-medium">{{ stats.posts }}</span>
+        </div>
+        <div class="flex justify-between">
+          <span class="text-gray-600">Members:</span>
+          <span class="font-medium">{{ stats.members }}</span>
+        </div>
+        <div class="flex justify-between">
+          <span class="text-gray-600">Newest Member:</span>
+          <a href="#" class="text-primary hover:underline">{{ stats.newestMember }}</a>
+        </div>
+      </div>
+    </div>
+    <!-- Popular Topics -->
+    <div class="p-4 border rounded-md">
+      <h3 class="mb-3 font-medium">Popular Topics</h3>
+      <ul class="space-y-3">
+        @foreach(popularTopics as topic)
+          <li>
+            <a href="{{ topic.link }}" class="block line-clamp-1 text-primary hover:underline">{{ topic.title }}</a>
+            <div class="mt-1 text-gray-500 text-xs">
+              {{ topic.replyCount }} replies • {{ topic.viewCount }} views
+            </div>
+          </li>
+        @endforeach
+      </ul>
+    </div>
+    <!-- Online Users -->
+    <div class="p-4 border rounded-md">
+      <h3 class="mb-3 font-medium">Online Now</h3>
+      <div class="flex flex-wrap gap-2">
+        @foreach(onlineUsers as user)
+          <div class="relative">
+            <img src="{{ user.avatar }}" alt="{{ user.name }}" class="h-8 w-8 rounded-full">
+            <span class="absolute bottom-0 right-0 h-2.5 w-2.5 bg-green-500 border-2 border-white rounded-full"></span>
+          </div>
+        @endforeach
+      </div>
+      <div class="mt-3 text-gray-500 text-xs">
+        {{ onlineUsers.length }} users online now
+      </div>
+    </div>
+  </div>

package/resources/components/Forum/ForumTopicItem.stx ADDED Viewed

@@ -0,0 +1,77 @@
+<script>
+interface ForumTopicItemProps {
+  title?: string
+  link?: string
+  authorName?: string
+  authorAvatar?: string
+  createdAt?: string
+  viewCount?: number
+  replyCount?: number
+  likeCount?: number
+  isPinned?: boolean
+  isSolved?: boolean
+  category?: string
+  categoryLink?: string
+  excerpt?: string
+  lastReplyAuthorName?: string
+  lastReplyAuthorAvatar?: string
+  lastReplyAt?: string
+}
+const { title = '', link = '', authorName = '', authorAvatar = '', createdAt = '', viewCount = 0, replyCount = 0, likeCount = 0, isPinned = false, isSolved = false, category = '', categoryLink = '', excerpt = '', lastReplyAuthorName = '', lastReplyAuthorAvatar = '', lastReplyAt = '' } = defineProps<ForumTopicItemProps>()
+</script>
+<div class="flex items-start p-4 hover:bg-gray-50">
+    <div class="flex-shrink-0 mr-4">
+      <img src="{{ authorAvatar }}" alt="{{ authorName }}" class="h-10 w-10 rounded-full">
+    </div>
+    <div class="flex-grow min-w-0">
+      <div class="flex gap-2 items-center">
+        <h3 class="font-medium text-primary hover:underline">
+          <a href="{{ link }}">{{ title }}</a>
+        </h3>
+        @if(isPinned)
+          <span class="px-2 py-0.5 text-gray-700 text-xs bg-gray-200 rounded">Pinned</span>
+        @endif
+        @if(isSolved)
+          <span class="px-2 py-0.5 text-dark text-xs bg-success rounded">Solved</span>
+        @endif
+      </div>
+      <div class="flex items-center mt-1 text-gray-500 text-xs">
+        <span>{{ authorName }}</span>
+        <span class="mx-1">•</span>
+        <span>{{ createdAt }}</span>
+        @if(category)
+          <span class="mx-1">•</span>
+          <a href="{{ categoryLink }}" class="text-gray-700 hover:underline">{{ category }}</a>
+        @endif
+      </div>
+      @if(excerpt)
+        <p class="mt-2 line-clamp-2 text-gray-600 text-sm">{{ excerpt }}</p>
+      @endif
+      <div class="flex gap-4 items-center mt-2 text-gray-500 text-xs">
+        <div class="flex gap-1 items-center">
+          <div class="i-hugeicons-eye"></div>
+          <span>{{ viewCount }}</span>
+        </div>
+        <div class="flex gap-1 items-center">
+          <div class="i-hugeicons-chat"></div>
+          <span>{{ replyCount }}</span>
+        </div>
+        <div class="flex gap-1 items-center">
+          <div class="i-hugeicons-heart"></div>
+          <span>{{ likeCount }}</span>
+        </div>
+      </div>
+    </div>
+    @if(lastReplyAuthorAvatar)
+      <div class="flex-shrink-0 ml-4 text-right">
+        <img src="{{ lastReplyAuthorAvatar }}" alt="{{ lastReplyAuthorName }}" class="inline-block h-6 w-6 rounded-full">
+        <div class="mt-1 text-gray-500 text-xs">{{ lastReplyAt }}</div>
+      </div>
+    @endif
+  </div>

package/resources/components/Forum/ForumTopicList.stx ADDED Viewed

@@ -0,0 +1,23 @@
+<script>
+interface ForumTopicListProps {
+  title?: string
+}
+const { title = '' } = defineProps<ForumTopicListProps>()
+</script>
+<div class="mb-8">
+  <div class="flex items-center justify-between px-4 py-3 bg-gray-100 rounded-t-md">
+    <h2 class="font-bold text-lg">{{ title }}</h2>
+    <div class="flex gap-2 items-center">
+      <select class="px-2 py-1 text-sm border rounded" name="sort" data-action="sort-topics">
+        <option value="latest">Sort by Latest</option>
+        <option value="popular">Sort by Popular</option>
+        <option value="unanswered">Sort by Unanswered</option>
+      </select>
+    </div>
+  </div>
+  <div class="border divide-y rounded-b-md">
+    <slot />
+  </div>
+</div>