Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | 'use client';
/**
* ArticleCard - Preview card for a FAQ article
*/
import React from 'react';
import Link from 'next/link';
import { SupportArticle } from '@/types/support';
import { Icon } from '@/components/ui/icons';
export interface ArticleCardProps {
/** The article to display */
article: SupportArticle;
}
export default function ArticleCard({ article }: ArticleCardProps) {
return (
<Link
href={`/support/articles/${article.slug}`}
className="
block bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700
hover:border-blue-300 dark:hover:border-blue-600 hover:shadow-md
transition-all p-6
"
>
<div className="flex items-start justify-between gap-4">
<div className="flex-1 min-w-0">
{/* Category Badge */}
<span className="inline-block px-2 py-0.5 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded mb-2">
{article.category}
</span>
{/* Title */}
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
{article.title}
</h3>
{/* Summary */}
<p className="text-gray-600 dark:text-gray-400 text-sm line-clamp-2">
{article.summary}
</p>
{/* Stats */}
<div className="flex items-center gap-4 mt-3 text-sm text-gray-500 dark:text-gray-400">
<span className="flex items-center gap-1">
<Icon name="eye" size={16} />
{article.viewCount} views
</span>
{article.helpfulCount > 0 && (
<span className="flex items-center gap-1">
<Icon name="thumb-up" size={16} />
{article.helpfulCount} found helpful
</span>
)}
</div>
</div>
{/* Arrow */}
<Icon name="chevron-right" size={20} className="text-gray-400 flex-shrink-0" />
</div>
</Link>
);
}
|