NotificationCard

notificationcard-1779354160158.tsx

'use client';

import React, { useState } from 'react';

interface Notification {
  id: number;
  avatar: string;
  message: string;
  time: string;
  unread: boolean;
}

const notifications: Notification[] = [
  { id: 1, avatar: 'https://via.placeholder.com/40', message: 'New message from John Doe', time: '10 minutes ago', unread: true },
  { id: 2, avatar: 'https://via.placeholder.com/40', message: 'New comment on your post', time: '1 hour ago', unread: false },
  { id: 3, avatar: 'https://via.placeholder.com/40', message: 'New friend request from Jane Doe', time: '2 hours ago', unread: true },
  { id: 4, avatar: 'https://via.placeholder.com/40', message: 'New notification from admin', time: '3 hours ago', unread: false },
];

const NotificationCard = () => {
  const [notificationsState, setNotificationsState] = useState(notifications);

  const markAllRead = () => {
    setNotificationsState(notificationsState.map((notification) => ({ ...notification, unread: false })));
  };

  return (
    <div className="bg-zinc-950 p-4 rounded-lg">
      <h2 className="text-lg font-bold text-gold mb-4">Notifications</h2>
      <ul>
        {notificationsState.map((notification) => (
          <li key={notification.id} className="flex items-center py-2 border-b border-zinc-800">
            <img src={notification.avatar} alt="Avatar" className="w-8 h-8 rounded-full mr-2" />
            <div className="flex-1">
              <p className="text-sm text-gray-300">{notification.message}</p>
              <p className="text-xs text-gray-500">{notification.time}</p>
            </div>
            {notification.unread && <div className="w-2 h-2 bg-gold rounded-full ml-2" />}
          </li>
        ))}
      </ul>
      <button
        className="bg-gold hover:bg-gold-dark text-zinc-950 font-bold py-2 px-4 rounded-lg mt-4"
        onClick={markAllRead}
      >
        Mark all as read
      </button>
    </div>
  );
};

export default NotificationCard;

Component info

CategoryCards

Frameworkreact

TierFREE

Copies0

About

Notification list card with unread indicators

More from Cards

'use client';

import React from 'react';

interface Testimonial {
  avatar: string;
  quote: string;
  rating: number;
  name: string;
  role: string;
}

const testimonials: Testimonial[] = [
  {
    avatar: 'https://via.placeholder.com/50',
    quo

TestimonialCard

Cards

'use client';

import React from 'react';

interface SocialLink {
  icon: string;
  url: string;
}

interface Profile {
  avatar: string;
  name: string;
  bio: string;
  socialLinks: SocialLink[];
}

const demoProfile: Profile = {
  avatar: 'https:/

ProfileCard

Cards

'use client';

import React, { useState, useEffect } from 'react';

interface StatsCardProps {
  label: string;
  value: number;
  trend: 'up' | 'down';
  percentageChange: number;
  sparklineData: number[];
}

const StatsCard: React.FC<StatsCardProp

StatsCard

Cards

'use client';

import React from 'react';

interface Feature {
  name: string;
}

interface PricingCardProps {
  title: string;
  price: string;
  features: Feature[];
  featured?: boolean;
}

const PricingCard: React.FC<PricingCardProps> = ({ title,

PricingCard

Cards