Card Component

Description

The Card component is a customizable tailwind Card compoennt.

Installation

To use the Card component in your project, you can install it via npm (or include it as part of your component library):

npm install custom-headless-card

Usage

Here’s a simple example of how to use the Card component in your application:

import React, { useState } from "react";
import { Card } from "custom-headless-card";

const App = () => {
  const userInfo = [
    {
      name: "user1",
      id: 1,
      status: "Active",
      DOB: "10/20/1986",
      age: 38,
      state: "NY",
      city: "New York City",
    },
    {
      name: "user2",
      id: 2,
      status: "Inactive",
      DOB: "10/20/1994",
      age: 30,
      state: "MA",
      city: "Bostom",
    },
  ];

  return (
    <div>
      {userInfo.map((item, index) => (
        <div className="pt-4">
          <Card
            index={index}
            cardHeader={
              <>
                <div className="flex justify-between items-center mt-auto">
                  <div className="text-sm">{item.name}</div>
                  <div className="text-sm">{item.id}</div>
                  <span className="inline-block bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full">
                    {item.status}
                  </span>
                </div>
              </>
            }
            cardBody={
              <>
                <div className="text-sm">Date Of Birth: {item.DOB}</div>
                <div className="text-sm "> Age: {item.age}</div>
              </>
            }
            cardFooter={
              <div className=" mt-auto">
                {item.state} {item.city}
              </div>
            }
          />
        </div>
      ))}
    </div>
  );
};

export default App;

Props

Card Props

| Prop | Type | Description | | -------------- | ----------------- | ----------------------------------------------------------- | | splitWidth | string | Optional. Defines width classes for split content. | | splitContent | React.ReactNode | Optional. Can be any React node for split content. | | cardHeader | React.ReactNode | Required. The header content of the card (can include JSX). | | cardBody | React.ReactNode | Required. The body content of the card (can include JSX). | | cardFooter | React.ReactNode | Optional. The footer content of the card (can include JSX). | | index | number | Optional. Defaults to 0. Index for rendering. | | onClick | () => void | Optional. Function to call when the card is clicked. | | cardTitle | string | Optional. Title of the card displayed at the top. | | expandable | boolean | Optional. Determines if the card is expandable. | | hideBorder | boolean | Optional. If true, hides the card’s border. |

Styles

The Card component is styled using Tailwind CSS classes. Make sure to include Tailwind CSS in your project to apply the styles correctly.

Example CSS Setup

If you haven’t set up Tailwind CSS yet, here’s a basic example of how to do it:

1. Install Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Configure your tailwind.config.js file:

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Include Tailwind in your CSS file: Add the following lines to your main CSS file to include Tailwind’s base, components, and utilities:

@tailwind base;
@tailwind components;
@tailwind utilities;

Customization

Feel free to customize the Tailwind classes used in the Card component as needed to fit the design of your application.