chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: Components
|
||||
description: Getting started with Creative Tim UI
|
||||
---
|
||||
|
||||
Installing Creative Tim UI components is straightforward and can be done in a couple of ways. You can use the dedicated CLI command for the fastest setup, or integrate via the standard shadcn/ui CLI if you've already adopted shadcn's workflow.
|
||||
|
||||
<Tabs defaultValue="creative-tim">
|
||||
|
||||
<TabsList>
|
||||
<TabsTrigger value="creative-tim">Creative Tim CLI</TabsTrigger>
|
||||
<TabsTrigger value="shadcn">shadcn</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="creative-tim">
|
||||
|
||||
```bash
|
||||
npx @creative-tim/ui@latest add button
|
||||
```
|
||||
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="shadcn">
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add https://creative-tim.com/ui/r/button.json
|
||||
```
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before installing Creative Tim UI, make sure your environment meets the following requirements:
|
||||
|
||||
- [Node.js](https://nodejs.org/) version 18 or later
|
||||
- A [Next.js](https://nextjs.org/) project
|
||||
- [shadcn/ui](https://ui.shadcn.com/) setup in your project. If you don't have it setup, running any install command will set it up for you.
|
||||
|
||||
## Installing components
|
||||
|
||||
You can install Creative Tim UI components using either the `@creative-tim/ui` CLI or the `shadcn/ui` CLI. Both achieve the same result: adding the selected component’s code and any needed dependencies to your project.
|
||||
|
||||
The CLI will download the component's code and integrate it into your project's directory (usually under your components folder).
|
||||
|
||||
After running the command, you should see a confirmation in your terminal that the files were added. You can then proceed to use the component in your code.
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: Debug Logs
|
||||
description: Common issues and debugging steps for Creative Tim UI components.
|
||||
---
|
||||
|
||||
## Components appear unstyled
|
||||
|
||||
Verify your project has the correct Tailwind CSS configuration for shadcn/ui. Your `globals.css` file should import Tailwind and include shadcn/ui base styles for proper component rendering.
|
||||
|
||||
---
|
||||
|
||||
## CLI installation completes but no files appear
|
||||
|
||||
Check these common issues:
|
||||
|
||||
- Confirm you're running the command from your project root directory (where `package.json` is located).
|
||||
- Verify your `components.json` configuration file has the correct settings if you're using shadcn-style setup.
|
||||
- Use the latest CLI version to ensure compatibility:
|
||||
|
||||
```bash
|
||||
npx @creative-tim/ui@latest add card
|
||||
```
|
||||
|
||||
## Theme toggle stuck on light mode
|
||||
|
||||
Your application needs to use the same theme system as shadcn/ui. The components expect a `data-theme` attribute on the `<html>` element. Check your `tailwind.config.js` to ensure it's configured with the appropriate class or data selectors for theme switching.
|
||||
|
||||
## Import errors showing "module not found"
|
||||
|
||||
Confirm the component file exists in your project. If it does, check your `tsconfig.json` has the correct path mapping for the `@/` alias:
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Need additional help?
|
||||
|
||||
If you're still experiencing issues, open a support ticket on [GitHub](https://github.com/creativetimofficial/ui/issues) with details about your setup and the problem you're encountering.
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
title: How It Works
|
||||
description: Learn how Creative Tim UI components work within your application.
|
||||
---
|
||||
|
||||
Creative Tim UI components integrate directly into your project as source code, not as dependencies locked in external packages. This means each component lives in your codebase, giving you complete control to customize, extend, or modify them to match your exact requirements.
|
||||
|
||||
---
|
||||
|
||||
## Example
|
||||
|
||||
Once you've installed a component, simply import it like any other React component in your application. Here's a practical example showing a form card with inputs:
|
||||
|
||||
<ComponentPreview
|
||||
name="form-card-demo"
|
||||
title="Form Card Example"
|
||||
defaultTab="code"
|
||||
description="A card component with form inputs for user registration."
|
||||
/>
|
||||
|
||||
You can use the installed components throughout your application with full flexibility to adapt them to your needs.
|
||||
|
||||
---
|
||||
|
||||
## Block Example
|
||||
|
||||
Blocks are larger, pre-built sections that combine multiple components together. Here's a testimonial block that showcases customer stories with rich typography and layout:
|
||||
|
||||
<ComponentPreview
|
||||
name="testimonials-09"
|
||||
align="start"
|
||||
marginOff={true}
|
||||
title="Testimonials Block"
|
||||
description="A customer story section with large heading, blockquote, and avatar details."
|
||||
/>
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: Introduction
|
||||
---
|
||||
|
||||
Creative Tim UI is a comprehensive component library and custom registry built on top of [shadcn/ui](https://ui.shadcn.com/) to help you build beautiful, modern web applications faster. It provides pre-built, customizable React components and blocks designed for production-ready applications.
|
||||
|
||||
## Installation
|
||||
|
||||
Components are available via the `@creative-tim/ui` command.
|
||||
|
||||
```bash
|
||||
npx @creative-tim/ui@latest add <component>
|
||||
```
|
||||
|
||||
For example, to install a button component, you can run:
|
||||
|
||||
```bash
|
||||
npx @creative-tim/ui@latest add button
|
||||
```
|
||||
|
||||
Alternatively, you can use the standard shadcn CLI:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add https://creative-tim.com/ui/r/<component>.json
|
||||
```
|
||||
|
||||
## Copyrights and Licenses
|
||||
|
||||
Creative Tim UI is built upon the incredible work of the open source community:
|
||||
|
||||
- **[shadcn/ui](https://ui.shadcn.com/)** - The documentation structure, registry system, and foundational (atomic) components are from the open source work in shadcn/ui. [MIT License](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md)
|
||||
- **[Material Tailwind](https://material-tailwind.com/v3)** by Creative Tim - The blocks and component designs are inspired by and based on Material Tailwind Framework. [MIT License](https://github.com/creativetimofficial/material-tailwind/blob/main/LICENSE.md)
|
||||
- **[Eleven Labs UI](https://github.com/elevenlabs/elevenlabs-ui)** - General inspiration for the documentation structure and approach of blocks. [MIT License](https://github.com/elevenlabs/ui/blob/main/LICENSE.md)
|
||||
- **[Geist Font](https://vercel.com/font)** by Vercel - The beautiful typeface used throughout the interface. [SIL Open Font License 1.1](https://github.com/vercel/geist-font/blob/main/LICENSE.txt)
|
||||
|
||||
We are grateful to these projects for making their work available under open source licenses.
|
||||
|
||||
## Featured Components
|
||||
|
||||
Here are some examples of what you can build with Creative Tim UI components:
|
||||
|
||||
### Cards
|
||||
|
||||
Versatile card components for displaying content in various formats - from simple content cards to blog posts and e-commerce products.
|
||||
|
||||
<ComponentPreview
|
||||
name="card-plain"
|
||||
title="Plain Card"
|
||||
hideCode={true}
|
||||
description="A simple card with basic content."
|
||||
/>
|
||||
|
||||
<ComponentPreview
|
||||
name="card-with-button"
|
||||
title="Card with Button"
|
||||
hideCode={true}
|
||||
description="Card with header, description, and action button."
|
||||
/>
|
||||
|
||||
<ComponentPreview
|
||||
name="card-blog"
|
||||
title="Blog Card"
|
||||
hideCode={true}
|
||||
description="Card optimized for blog posts with image and metadata."
|
||||
/>
|
||||
|
||||
<ComponentPreview
|
||||
name="card-ecommerce"
|
||||
title="E-commerce Card"
|
||||
hideCode={true}
|
||||
description="Product card with ratings, price, and cart actions."
|
||||
/>
|
||||
|
||||
[View Card Documentation](/docs/components/card)
|
||||
|
||||
## Resources
|
||||
|
||||
You can explore all available blocks [here](/blocks), view the [full component library](/docs/components), or check out the [source code](https://github.com/creativetimofficial/ui) on GitHub.
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"title": "Get Started",
|
||||
"pages": [
|
||||
"index",
|
||||
"registry",
|
||||
"components",
|
||||
"how-it-works",
|
||||
"debug-logs"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
title: Registry
|
||||
description: Learn about the Creative Tim UI component registry system.
|
||||
---
|
||||
|
||||
## What is the Registry?
|
||||
|
||||
The Creative Tim UI registry is a centralized catalog system that enables CLI-based component installation based on shadcn/ui. Unlike traditional npm packages where components are locked in external dependencies, our registry delivers components as source code directly into your project.
|
||||
|
||||
## How the Registry Works
|
||||
|
||||
When you run the installation command, the CLI:
|
||||
|
||||
1. **Fetches Component Metadata**: Retrieves the component definition from our registry endpoint
|
||||
2. **Downloads Dependencies**: Identifies and installs required npm packages
|
||||
3. **Copies Source Files**: Places component files directly into your codebase
|
||||
4. **Manages Imports**: Automatically configures path aliases and imports
|
||||
|
||||
## Registry Structure
|
||||
|
||||
Each component in the registry includes:
|
||||
|
||||
- **Component Source Code**: The actual React component files
|
||||
- **Type Definitions**: Full TypeScript support with strict types
|
||||
- **Dependencies**: List of required npm packages (Radix UI, etc.)
|
||||
- **Files Metadata**: Information about where files should be placed
|
||||
- **Registry Dependencies**: Other registry components it depends on
|
||||
|
||||
## Installation Endpoints
|
||||
|
||||
Components are available through JSON endpoints:
|
||||
|
||||
```bash
|
||||
# Base UI Components
|
||||
/r/button.json
|
||||
/r/card.json
|
||||
/r/avatar.json
|
||||
|
||||
# Custom Blocks
|
||||
/r/testimonials-09.json
|
||||
```
|
||||
|
||||
These endpoints return structured JSON that the CLI uses to install components.
|
||||
|
||||
## Registry vs NPM
|
||||
|
||||
| Feature | Registry (Source Code) | NPM Package |
|
||||
|---------|----------------------|-------------|
|
||||
| **Customization** | Full control, edit directly | Limited to props/config |
|
||||
| **Updates** | Manual, opt-in | Automatic via package manager |
|
||||
| **Bundle Size** | Only what you use | Entire package included |
|
||||
| **Version Control** | Part of your codebase | External dependency |
|
||||
| **Flexibility** | Modify, extend freely | Constrained by package API |
|
||||
|
||||
## Registry Components
|
||||
|
||||
The Creative Tim UI registry currently includes:
|
||||
|
||||
- **47 Base UI Components**: All shadcn/ui components (button, card, avatar, etc.)
|
||||
- **100+ Custom Blocks**: Pre-built sections like testimonials, forms, and more
|
||||
- **Full TypeScript Support**: Type-safe component definitions
|
||||
- **Dark Mode Ready**: Built-in theme support with CSS variables
|
||||
|
||||
## Private Components
|
||||
|
||||
The registry supports private components with API key authentication for PRO features:
|
||||
|
||||
- Access control via Bearer tokens or API keys
|
||||
- Gated installation for premium components
|
||||
- Environment variable support for CI/CD workflows
|
||||
|
||||
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Install Only What You Need**: Each component is standalone, no bloat
|
||||
2. **Customize After Install**: Treat installed components as your own code
|
||||
3. **Version Control**: Commit installed components to your repository
|
||||
4. **Update Selectively**: Re-run install commands to update specific components
|
||||
@@ -0,0 +1,270 @@
|
||||
---
|
||||
title: Card
|
||||
description: Versatile card components for displaying content in a structured, visually appealing format.
|
||||
featured: true
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentPreview
|
||||
name="card-demo"
|
||||
description="A collection of card variations."
|
||||
/>
|
||||
|
||||
## Installation
|
||||
|
||||
<CodeTabs>
|
||||
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx @creative-tim/ui@latest add card
|
||||
```
|
||||
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Install the following dependencies:</Step>
|
||||
|
||||
```bash
|
||||
npm install lucide-react
|
||||
```
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource name="card" title="components/ui/card.tsx" />
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</CodeTabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx showLineNumbers
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Plain Card
|
||||
|
||||
A simple card with just content.
|
||||
|
||||
<ComponentPreview
|
||||
name="card-plain"
|
||||
description="A plain card with basic content."
|
||||
/>
|
||||
|
||||
```tsx showLineNumbers {3-9}
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<p>
|
||||
This is a plain card with simple content. Perfect for displaying basic
|
||||
information.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
```
|
||||
|
||||
### Card with Title, Description, and Button
|
||||
|
||||
A card with header elements and a call-to-action button.
|
||||
|
||||
<ComponentPreview
|
||||
name="card-with-button"
|
||||
description="A card with title, description, and action button."
|
||||
/>
|
||||
|
||||
```tsx showLineNumbers {3-16}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Card Title</CardTitle>
|
||||
<CardDescription>
|
||||
This is a brief description of the card content.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p>More detailed information goes here in the card content area.</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button>Learn More</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
```
|
||||
|
||||
### Blog Card
|
||||
|
||||
A card designed for blog post previews with image, title, excerpt, and metadata.
|
||||
|
||||
<ComponentPreview
|
||||
name="card-blog"
|
||||
description="A blog post card with image and metadata."
|
||||
/>
|
||||
|
||||
```tsx showLineNumbers {3-24}
|
||||
<Card className="overflow-hidden">
|
||||
<img
|
||||
src="/blog-image.jpg"
|
||||
alt="Blog post"
|
||||
className="h-48 w-full object-cover"
|
||||
/>
|
||||
<CardHeader>
|
||||
<div className="text-muted-foreground flex items-center gap-2 text-sm">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span>March 15, 2025</span>
|
||||
<span>•</span>
|
||||
<span>5 min read</span>
|
||||
</div>
|
||||
<CardTitle>Getting Started with Next.js</CardTitle>
|
||||
<CardDescription>
|
||||
Learn how to build modern web applications with Next.js, React, and
|
||||
TypeScript.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardFooter>
|
||||
<Button variant="ghost">Read More</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
```
|
||||
|
||||
### E-commerce Product Card
|
||||
|
||||
A card designed for product listings with image, pricing, and add to cart functionality.
|
||||
|
||||
<ComponentPreview
|
||||
name="card-ecommerce"
|
||||
description="An e-commerce product card with pricing and actions."
|
||||
/>
|
||||
|
||||
```tsx showLineNumbers {3-39}
|
||||
<Card className="overflow-hidden">
|
||||
<div className="relative">
|
||||
<img
|
||||
src="/product-image.jpg"
|
||||
alt="Product"
|
||||
className="h-64 w-full object-cover"
|
||||
/>
|
||||
<Badge className="absolute top-2 right-2">New</Badge>
|
||||
</div>
|
||||
<CardHeader>
|
||||
<CardTitle>Premium Wireless Headphones</CardTitle>
|
||||
<CardDescription>
|
||||
High-quality audio with active noise cancellation
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
|
||||
<Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
|
||||
<Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
|
||||
<Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
|
||||
<Star className="h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">(128)</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold">$299</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="gap-2">
|
||||
<Button className="flex-1">
|
||||
<ShoppingCart className="mr-2 h-4 w-4" />
|
||||
Add to Cart
|
||||
</Button>
|
||||
<Button variant="outline" size="icon">
|
||||
<Heart className="h-4 w-4" />
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
### Card
|
||||
|
||||
The root card container component.
|
||||
|
||||
#### Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| --------- | ----------- | ----------- | ---------------------- |
|
||||
| className | `string` | `undefined` | Additional CSS classes |
|
||||
| children | `ReactNode` | `undefined` | Card content |
|
||||
|
||||
### CardHeader
|
||||
|
||||
Container for card header content (title, description).
|
||||
|
||||
#### Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| --------- | ----------- | ----------- | ---------------------- |
|
||||
| className | `string` | `undefined` | Additional CSS classes |
|
||||
| children | `ReactNode` | `undefined` | Header content |
|
||||
|
||||
### CardTitle
|
||||
|
||||
The card title component.
|
||||
|
||||
#### Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| --------- | ----------- | ----------- | ---------------------- |
|
||||
| className | `string` | `undefined` | Additional CSS classes |
|
||||
| children | `ReactNode` | `undefined` | Title text |
|
||||
|
||||
### CardDescription
|
||||
|
||||
The card description component.
|
||||
|
||||
#### Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| --------- | ----------- | ----------- | ---------------------- |
|
||||
| className | `string` | `undefined` | Additional CSS classes |
|
||||
| children | `ReactNode` | `undefined` | Description text |
|
||||
|
||||
### CardContent
|
||||
|
||||
Container for the main card content.
|
||||
|
||||
#### Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| --------- | ----------- | ----------- | ---------------------- |
|
||||
| className | `string` | `undefined` | Additional CSS classes |
|
||||
| children | `ReactNode` | `undefined` | Card body content |
|
||||
|
||||
### CardFooter
|
||||
|
||||
Container for card footer content (buttons, actions).
|
||||
|
||||
#### Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| --------- | ----------- | ----------- | ---------------------- |
|
||||
| className | `string` | `undefined` | Additional CSS classes |
|
||||
| children | `ReactNode` | `undefined` | Footer content |
|
||||
|
||||
## Notes
|
||||
|
||||
- Cards are fully responsive and adapt to their container
|
||||
- Use `overflow-hidden` class on Card to clip images at rounded corners
|
||||
- Combine with other components like Button, Badge, and icons for rich layouts
|
||||
- Based on shadcn/ui Card component with Material Tailwind design enhancements
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Components
|
||||
description: Explore all the components available in the library.
|
||||
---
|
||||
|
||||
<ComponentsList />
|
||||
@@ -0,0 +1,236 @@
|
||||
---
|
||||
title: Software Purchase Card
|
||||
description: A card component for displaying and approving software purchase requests with details like start date, seats, pricing type, and price.
|
||||
featured: true
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentPreview
|
||||
name="software-purchase-card-demo"
|
||||
description="A software purchase approval card."
|
||||
/>
|
||||
|
||||
## Installation
|
||||
|
||||
<CodeTabs>
|
||||
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add software-purchase-card
|
||||
```
|
||||
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Install the following dependencies:</Step>
|
||||
|
||||
```bash
|
||||
npm install lucide-react
|
||||
```
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource
|
||||
name="software-purchase-card"
|
||||
title="components/cards/software-purchase.tsx"
|
||||
/>
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</CodeTabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx showLineNumbers
|
||||
import { SoftwarePurchaseCard } from "@/components/cards/software-purchase"
|
||||
```
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```tsx showLineNumbers
|
||||
<SoftwarePurchaseCard
|
||||
softwareName="Enterprise Cloud Suite"
|
||||
startDate="2025-01-15"
|
||||
seats={50}
|
||||
pricingType="per-seat"
|
||||
price="$2,500"
|
||||
onApprove={() => console.log("Approved")}
|
||||
onDiscard={() => console.log("Discarded")}
|
||||
/>
|
||||
```
|
||||
|
||||
### Flat Rate Pricing
|
||||
|
||||
```tsx showLineNumbers
|
||||
<SoftwarePurchaseCard
|
||||
softwareName="Design Tools Pro"
|
||||
startDate="2025-02-01"
|
||||
seats={25}
|
||||
pricingType="flat-rate"
|
||||
price="$999"
|
||||
onApprove={handleApprove}
|
||||
onDiscard={handleDiscard}
|
||||
/>
|
||||
```
|
||||
|
||||
### Usage-Based Pricing
|
||||
|
||||
```tsx showLineNumbers
|
||||
<SoftwarePurchaseCard
|
||||
softwareName="API Gateway Service"
|
||||
startDate="2025-01-20"
|
||||
seats={10}
|
||||
pricingType="usage-based"
|
||||
price="$0.05/request"
|
||||
onApprove={handleApprove}
|
||||
onDiscard={handleDiscard}
|
||||
/>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
### SoftwarePurchaseCard
|
||||
|
||||
The main card component for displaying software purchase details.
|
||||
|
||||
#### Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| ------------ | -------------------------------------------- | -------------------------- | --------------------------------------------- |
|
||||
| softwareName | `string` | `"Enterprise Cloud Suite"` | Name of the software |
|
||||
| startDate | `string` | `"2025-01-15"` | Start date in ISO format (YYYY-MM-DD) |
|
||||
| seats | `number` | `50` | Number of user seats/licenses |
|
||||
| pricingType | `"per-seat" \| "flat-rate" \| "usage-based"` | `"per-seat"` | Type of pricing model |
|
||||
| price | `string` | `"$2,500"` | Price display string (can include formatting) |
|
||||
| onApprove | `() => void` | `undefined` | Callback function when approve button clicked |
|
||||
| onDiscard | `() => void` | `undefined` | Callback function when discard button clicked |
|
||||
|
||||
## Examples
|
||||
|
||||
### With State Management
|
||||
|
||||
```tsx showLineNumbers
|
||||
function PurchaseApproval() {
|
||||
const [status, setStatus] = useState<"pending" | "approved" | "discarded">(
|
||||
"pending"
|
||||
)
|
||||
|
||||
const handleApprove = () => {
|
||||
setStatus("approved")
|
||||
// API call to approve purchase
|
||||
approvePurchase(purchaseId)
|
||||
}
|
||||
|
||||
const handleDiscard = () => {
|
||||
setStatus("discarded")
|
||||
// API call to discard purchase
|
||||
discardPurchase(purchaseId)
|
||||
}
|
||||
|
||||
return (
|
||||
<SoftwarePurchaseCard
|
||||
softwareName="Marketing Automation Suite"
|
||||
startDate="2025-03-01"
|
||||
seats={75}
|
||||
pricingType="per-seat"
|
||||
price="$3,750"
|
||||
onApprove={handleApprove}
|
||||
onDiscard={handleDiscard}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### With Loading State
|
||||
|
||||
```tsx showLineNumbers
|
||||
function PurchaseApprovalWithLoading() {
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleApprove = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
await approvePurchaseRequest()
|
||||
toast.success("Purchase approved successfully")
|
||||
} catch (error) {
|
||||
toast.error("Failed to approve purchase")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<SoftwarePurchaseCard
|
||||
softwareName="Analytics Platform"
|
||||
startDate="2025-02-15"
|
||||
seats={100}
|
||||
pricingType="flat-rate"
|
||||
price="$5,000"
|
||||
onApprove={handleApprove}
|
||||
onDiscard={() => {}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Multiple Cards in a List
|
||||
|
||||
```tsx showLineNumbers
|
||||
function PurchaseRequestList() {
|
||||
const requests = [
|
||||
{
|
||||
id: 1,
|
||||
softwareName: "CRM Software",
|
||||
startDate: "2025-01-15",
|
||||
seats: 50,
|
||||
pricingType: "per-seat" as const,
|
||||
price: "$2,500",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
softwareName: "Project Management Tool",
|
||||
startDate: "2025-02-01",
|
||||
seats: 30,
|
||||
pricingType: "flat-rate" as const,
|
||||
price: "$999",
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{requests.map((request) => (
|
||||
<SoftwarePurchaseCard
|
||||
key={request.id}
|
||||
{...request}
|
||||
onApprove={() => handleApprove(request.id)}
|
||||
onDiscard={() => handleDiscard(request.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Block Example
|
||||
|
||||
For a full-page implementation with detailed purchase information, check out the [software-purchase-01](/blocks/software-purchase-01) block.
|
||||
|
||||
## Notes
|
||||
|
||||
- The date is automatically formatted using `toLocaleDateString` with US locale
|
||||
- The pricing type badge displays in a secondary variant for visual hierarchy
|
||||
- Icons from `lucide-react` are used for visual clarity (Calendar, Users, CreditCard, DollarSign)
|
||||
- The component uses the shadcn/ui Card, Button, and Badge components
|
||||
- The card is fully responsive with a max width of `md` (28rem)
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"root": true,
|
||||
"pages": [
|
||||
"(root)",
|
||||
"components"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user