ProfileCard

profilecard-1779354156266.tsx

'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://via.placeholder.com/50',
  name: 'John Doe',
  bio: 'Software Engineer with a passion for innovation',
  socialLinks: [
    { icon: 'twitter', url: 'https://twitter.com/johndoe' },
    { icon: 'github', url: 'https://github.com/johndoe' },
    { icon: 'linkedin', url: 'https://linkedin.com/in/johndoe' },
  ],
};

const ProfileCard = () => {
  const [isFollowing, setIsFollowing] = React.useState(false);

  const handleFollow = () => {
    setIsFollowing(!isFollowing);
  };

  return (
    <div
      className="bg-zinc-950 p-4 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300"
    >
      <div className="flex items-center space-x-4">
        <div className="relative">
          <img
            src={demoProfile.avatar}
            alt={demoProfile.name}
            className="w-12 h-12 rounded-full"
          />
          <span
            className={`absolute bottom-0 right-0 block h-3 w-3 rounded-full ${
              isFollowing ? 'bg-green-500' : 'bg-red-500'
            }`}
          />
        </div>
        <div>
          <h2 className="text-lg font-bold text-white">{demoProfile.name}</h2>
          <p className="text-sm text-zinc-400">{demoProfile.bio}</p>
        </div>
      </div>
      <div className="flex items-center space-x-4 mt-4">
        {demoProfile.socialLinks.map((link, index) => (
          <a
            key={index}
            href={link.url}
            target="_blank"
            rel="noopener noreferrer"
            className="text-lg text-zinc-400 hover:text-gold transition-colors duration-200"
          >
            <i
              className={`fa fa-${link.icon} fa-lg ${
                link.icon === 'twitter' ? 'text-blue-500' : link.icon === 'github' ? 'text-gray-500' : 'text-blue-800'
              }`}
            />
          </a>
        ))}
      </div>
      <button
        onClick={handleFollow}
        className={`px-4 py-2 mt-4 rounded-lg ${
          isFollowing ? 'bg-gray-500 text-zinc-400' : 'bg-gold text-zinc-950'
        } transition-colors duration-200 hover:opacity-90`}
      >
        {isFollowing ? 'Following' : 'Follow'}
      </button>
    </div>
  );
};

export default ProfileCard;

Component info

CategoryCards

Frameworkreact

TierFREE

Copies0

About

User profile card with social links and bio

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

'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, { 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, { 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