pricing-card.tsx

Overview

The pricing-card.tsx file defines a React functional component named PricingCard that renders a styled pricing plan card for use in a user interface. This component displays essential pricing plan information such as the plan title, price, description, a list of features, and an action button. It supports different variants like "Pro" and "Enterprise" plans, which include distinctive icons and styling cues.

This file primarily focuses on presenting pricing data visually using pre-built UI components (Card, Badge, Button) and utility functions from the project, integrating icons from the lucide-react library.

Components and Interfaces

Interfaces

`PricingFeature`

Defines the shape of an individual feature associated with a pricing plan.

Property	Type	Description
`name`	string	The feature's name/title
`value`	string	The feature's value or specification
tooltip	string?	Optional tooltip text for additional information

`PricingCardProps`

Defines the properties accepted by the PricingCard component.

Property	Type	Description
`title`	string	Title of the pricing plan (e.g., "Free", "Pro", "Enterprise")
`price`	string	Pricing amount or label (e.g., "$9", "Customed")
`description`	string	Short description of the plan
`features`	`PricingFeature[]`	List of features included in the plan
`buttonText`	string	Text displayed on the action button
buttonVariant	['default'	'outline'
`badge`	string	(Optional) Text for badge display; not currently used in the component
`isPro`	boolean	Flag indicating if the plan is a Pro plan
`isEnterprise`	boolean	Flag indicating if the plan is an Enterprise plan

`PricingCard` Component

function PricingCard(props: PricingCardProps): JSX.Element

Description

The PricingCard component renders a pricing card UI element presenting the plan's title, price, description, features, and a call-to-action button. It conditionally shows icons and styles based on the plan type (Pro or Enterprise) and adapts button styling if the plan is "Free".

Parameters

props: PricingCardProps — Object containing all props described in the interface above.

Returns

A React element representing the pricing card.

Usage Example

import { PricingCard } from './pricing-card';

const features = [
  { name: 'Users', value: '10' },
  { name: 'Storage', value: '100GB' },
];

<PricingCard
  title="Pro"
  price="$29"
  description="Best for professionals"
  features={features}
  buttonText="Upgrade Now"
  isPro
/>

Implementation Details

Uses imported UI components:
- Card, CardHeader, CardContent for card layout.
- Badge to highlight the plan title with optional icons.
- Button as a call-to-action.
Uses cn utility function to conditionally apply CSS classes.
Displays icons (Zap for Pro, Mail for Enterprise) from lucide-react next to the badge and on the button.
Detects if the plan is "Free" by comparing the title prop.
Shows "/mo" next to the price unless the price string is "Customed".
Renders each feature as a list item showing the feature name and value.
The component is styled with Tailwind CSS classes (using utility-first CSS for layout and colors).

Important Implementation Notes

Conditional Icons and Styling: The component visually differentiates between Pro and Enterprise plans by showing respective icons (Zap and Mail) both in the badge and on the button.
"Free" Plan Special Case: The button background styling changes if the plan is "Free", indicating a different call-to-action style.
Price Labeling: The price display appends "/mo" unless the price is explicitly "Customed" (likely indicating custom pricing).
Features Rendering: Features are dynamically rendered from an array, allowing flexible feature lists per pricing plan.

Interaction with Other Parts of the System

UI Components: Relies on shared UI components (Badge, Button, Card, etc.) from the project's component library located under @/components/ui/.
Utility Functions: Uses cn from @/lib/utils to merge and conditionally apply Tailwind CSS classes.
Icon Library: Utilizes icons from the external lucide-react package to visually represent plan types.
Styling and Theming: Depends on Tailwind CSS classes for styling. The class names suggest a color and outline system that is part of the app's design tokens (e.g., bg-colors-background-neutral-weak).

This component is typically used on pricing or subscription pages to display plan options.

Visual Diagram

componentDiagram
    component PricingCard {
        +title: string
        +price: string
        +description: string
        +features: PricingFeature[]
        +buttonText: string
        +isPro?: boolean
        +isEnterprise?: boolean

        +Render()
    }
    component Badge
    component Button
    component Card
    component CardHeader
    component CardContent
    component ZapIcon
    component MailIcon

    PricingCard --> Card
    Card --> CardHeader
    Card --> CardContent
    CardHeader --> Badge
    CardHeader --> Button
    Badge --> ZapIcon
    Badge --> MailIcon
    Button --> ZapIcon
    Button --> MailIcon

Summary

The pricing-card.tsx file provides a reusable and customizable React component to display pricing plans with rich UI features such as badges with icons, dynamic feature lists, and contextual button styles. It integrates tightly with the app's UI component library and icon set, making it a key part of any pricing or subscription page UI. The design allows easy extension for new plan types or styling variants.