94 lines
3.3 KiB
TypeScript
94 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { X } from 'lucide-react';
|
|
import { Button } from '@/features/shared/components/ui/button';
|
|
|
|
/**
|
|
* EN: Announcement Banner props
|
|
* VI: Props cho Announcement Banner
|
|
*/
|
|
export interface AnnouncementBannerProps {
|
|
/** Announcement title / Tiêu đề thông báo */
|
|
title: string;
|
|
/** Announcement description / Mô tả thông báo */
|
|
description: string;
|
|
/** Link text / Text link */
|
|
linkText: string;
|
|
/** Link URL / URL link */
|
|
linkUrl: string;
|
|
/** Show close button / Hiển thị button đóng */
|
|
showClose?: boolean;
|
|
/** On close callback / Callback khi đóng */
|
|
onClose?: () => void;
|
|
/** Additional CSS classes / CSS classes bổ sung */
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* EN: Announcement Banner - Clean banner for news/announcements (x.ai style)
|
|
* VI: Announcement Banner - Banner sạch sẽ cho tin tức/thông báo (phong cách x.ai)
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <AnnouncementBanner
|
|
* title="New Feature Released"
|
|
* description="Check out our latest AI capabilities"
|
|
* linkText="Learn more"
|
|
* linkUrl="/news"
|
|
* />
|
|
* ```
|
|
*/
|
|
export function AnnouncementBanner({
|
|
title,
|
|
description,
|
|
linkText,
|
|
linkUrl,
|
|
showClose = false,
|
|
onClose,
|
|
className,
|
|
}: AnnouncementBannerProps) {
|
|
return (
|
|
<div className={`bg-bg-secondary/40 backdrop-blur-glass border-b border-border-primary ${className}`}>
|
|
<div className="container mx-auto px-6">
|
|
<div className="flex items-center justify-between py-3">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-xs text-text-tertiary uppercase tracking-wider font-medium">
|
|
News
|
|
</span>
|
|
</div>
|
|
<div className="hidden sm:block w-px h-4 bg-border-primary" />
|
|
<div className="flex items-center space-x-3">
|
|
<h3 className="text-sm font-medium text-text-primary">
|
|
{title}
|
|
</h3>
|
|
<span className="text-xs text-text-secondary">
|
|
{description}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
<a
|
|
href={linkUrl}
|
|
className="text-xs text-text-secondary hover:text-text-primary transition-colors underline"
|
|
>
|
|
{linkText}
|
|
</a>
|
|
{showClose && onClose && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onPress={onClose}
|
|
className="p-1 h-auto hover:bg-glass-hover"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |