AI Card

yarn add @camp/ai-card

import { Card, HeaderText, StyledCardHeader, StyledCardBody } from '@camp/ai-card';
 
<Card style={{ width: '400px' }}>
  <StyledCardHeader>
    <HeaderText>
      Card Header with a long title that should not wrap but should be truncated
    </HeaderText>
  </StyledCardHeader>
  <StyledCardBody>
    This is a basic card with a header and body content. The card component is flexible and can be
    used for various content types.
  </StyledCardBody>
</Card>;

import { BlockCard, BlockType } from '@camp/ai-card';
 
// Example stock images
const sampleImages = [
  'https://picsum.photos/id/15/200/300',
  'https://picsum.photos/id/19/200/300',
  'https://picsum.photos/id/17/200/300',
];
 
...
 
<div style={{ width: '600px' }}>
  <BlockCard
    type={BlockType.Automation}
    title="7-Day Welcome Drip Campaign"
    description="A 7-day email sequence to nurture new leads and increase engagement with your hardware store."
    isLoadingData={false}
    isLoadingImages={false}
    isOpen={false}
    images={sampleImages}
    maxImages={3}
    onClick={yourCallbackFunctionHere}
    isDisabled={false}
  />
</div>

import { StyledCard, StyledCardHeader, StyledCardBody, ChartWrapper } from '@camp/ai-card';
 
<StyledCard style={{ width: '400px' }}>
  <StyledCardHeader>
    <HeaderText>Chart Container</HeaderText>
  </StyledCardHeader>
  <StyledCardBody>
    <ChartWrapper height="200px">
      <div
        style={{
          background: '#f0f0f0',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        Chart content would go here (200px height)
      </div>
    </ChartWrapper>
  </StyledCardBody>
</StyledCard>;

import { Card } from '@/card';
 
<Card>
  <div className="ai-content">
    <h3>AI Generated Content</h3>
    <p>This is an example of AI-powered content.</p>
  </div>
</Card>;

import { Card } from '@camp/ai-card';
 
<Card>
  <div className="ai-content">
    <h3>AI Generated Content</h3>
    <p>This is an example of AI-powered content.</p>
  </div>
</Card>;