NFTCard

The NFTCard component is a versatile, responsive card designed to display NFT (Non-Fungible Token) details in your React application. This component supports light and dark themes, includes a like button, and allows users to trigger a buy action.

🛠️ Installation

Ensure you have the necessary packages installed:

  npm i @brightcodeui/beta-ui

Or with Yarn:

yarn add @brightcodeui/beta-ui

🧩 Component Props

Prop	Type	Required	Default	Description
imageSrc	string	✅	"/placeholder.svg"	The image URL for the NFT.
title	string	✅	""	The title of the NFT.
creator	string	✅	""	The name of the NFT creator.
price	string	✅	""	The current price of the NFT.
likes	number	🚫	0	The number of likes the NFT has received.
onBuyClick	() => void	🚫	undefined	Callback function triggered on Buy button click.
className	string	🚫	""	Additional CSS classes to customize the component.
theme	'light' 'dark'	🚫	'light'	Determines the color theme of the component.

🛠️ Usage Example

Example

Code

    import {NFTCard} from '@brightcodeui/beta-ui';

    const App = () => {
        const handleBuyClick = () => {
            alert("NFT purchased!");
        };

        return (
          <div className="p-4">
            <NFTCard
                imageSrc="https://res.cloudinary.com/dphb7gqus/image/upload/v1740226821/Oh6V69milpY3lQJboxJ6--0--rzahe_fsepsi.jpg"
                title="Nature cools"
                creator="PrimeCreator"
                price="0.3 ETH"
                likes={24}
                theme="light"
                onBuyClick={handleBuyClick}
                className="w-full"
            />

              <NFTCard
                  imageSrc="https://res.cloudinary.com/dphb7gqus/image/upload/v1740226820/P1gVQ0xvsQ43V1cQdOoL--0--7427x_tvfsnz.jpg"
                  title="Cosmic Perspective #42"
                  creator="ArtisticMind"
                  price="0.5 ETH"
                  likes={23}
                  theme="dark"
                  onBuyClick={handleBuyClick}
                  className="w-full"
              />
          </div>
        );
    };

    export default App;

🎨 Theming

The theme prop allows you to switch between light and dark modes:

• Light Theme (Default): bg-white, text-gray-800
• Dark Theme: bg-gray-800, text-white

Example usage for dark mode:

<NFTCard
  imageSrc="https://example.com/nft-dark.jpg"
  title="Neon Nights"
  creator="CyberArtist"
  price="1.2 ETH"
  likes={42}
  theme="dark"
/>

📚 Storybook Integration

Easily preview and test the component using Storybook:

export const DarkMode: Story = {
  args: {
    imageSrc: "https://res.cloudinary.com/dphb7gqus/image/upload/v1740226821/Oh6V69milpY3lQJboxJ6--0--rzahe_fsepsi.jpg",
    title: "Neon Nights",
    creator: "CyberArtist",
    price: "1.2 ETH",
    likes: 42,
    theme: "dark",
  },
};

Run Storybook to test your component:

npm run storybook

🚀 Conclusion

The NFTCard component is designed to be flexible and easy to use, making it ideal for showcasing NFTs in your app. You can customize the theme, handle buy actions, and display useful metadata, all within a clean, responsive UI.

Happy coding! 🚀