BookmarkCard

bookmarkcard-1779394643454.tsx

'use client'
import { useState } from 'react'

export default function BookmarkCard({
  title = 'Empire UI Documentation',
  url = 'empire-ui.com/docs',
  desc = 'Complete guide to using Empire UI components in your React project.',
  tags = ['docs','react','components'],
  emoji = '📚',
  saved = true,
}) {
  const [bookmarked, setBookmarked] = useState(saved)
  const [liked, setLiked] = useState(false)
  return (
    <div style={{ background:'#fff', borderRadius:'16px', padding:'16px', maxWidth:'340px', boxShadow:'0 2px 16px rgba(0,0,0,0.07)', border:'1px solid #f1f5f9' }}>
      <div style={{ display:'flex', gap:'12px', marginBottom:'12px' }}>
        <div style={{ width:'52px', height:'52px', borderRadius:'12px', background:'linear-gradient(135deg,#f0f4ff,#ede9fe)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:'24px', flexShrink:0 }}>{emoji}</div>
        <div style={{ flex:1, minWidth:0 }}>
          <h3 style={{ margin:'0 0 2px', fontSize:'14px', fontWeight:700, color:'#1e293b', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{title}</h3>
          <div style={{ fontSize:'11px', color:'#94a3b8', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{url}</div>
        </div>
      </div>
      <p style={{ margin:'0 0 12px', fontSize:'12px', color:'#64748b', lineHeight:1.6, display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical', overflow:'hidden' }}>{desc}</p>
      <div style={{ display:'flex', flexWrap:'wrap', gap:'5px', marginBottom:'12px' }}>
        {tags.map(t=>(
          <span key={t} style={{ background:'#f0f4ff', color:'#6366f1', padding:'3px 9px', borderRadius:'9999px', fontSize:'11px', fontWeight:600 }}>#{t}</span>
        ))}
      </div>
      <div style={{ display:'flex', justifyContent:'flex-end', gap:'6px' }}>
        <button onClick={()=>setLiked(!liked)} style={{ background:'none', border:'1px solid #e2e8f0', borderRadius:'8px', padding:'5px 10px', cursor:'pointer', fontSize:'14px', color:liked?'#ef4444':'#94a3b8' }}>{liked?'❤️':'🤍'}</button>
        <button onClick={()=>setBookmarked(!bookmarked)} style={{ background:'none', border:'1px solid #e2e8f0', borderRadius:'8px', padding:'5px 10px', cursor:'pointer', fontSize:'14px', color:bookmarked?'#f59e0b':'#94a3b8' }}>{bookmarked?'🔖':'📎'}</button>
        <button style={{ background:'#6d28d9', color:'#fff', border:'none', borderRadius:'8px', padding:'5px 12px', cursor:'pointer', fontSize:'12px', fontWeight:600 }}>Open →</button>
      </div>
    </div>
  )
}

Component info

CategoryCards

Frameworkreact

TierFREE

Copies0

About

Bookmark/saved link card with preview, tags and quick actions

More from 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

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

interface NoisyCardProps {
  children: React.ReactNode;
  className?: string;
}

const NoisyCard: React.FC<NoisyCardProps> = ({ children, className }) => {
  const [noise, setNo

NoisyCard

Cards

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

interface HolographicCardProps {
  children: React.ReactNode;
}

const HolographicCard: React.FC<HolographicCardProps> = ({ children }) => {
  const [mousePosition, setMousePosition] = useState({ x

HolographicCard

Cards

'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.placeho

NotificationCard

Cards