Card

import { Card, CardThumbnail, CardTitle, CardCaption, CardContent } from '@wanteddev/wds';

const Demo = () => {
  return (
    <Card 
      width="240px" 
      sx={{ margin: 'auto' }}
    >
      <CardThumbnail
        src="https://static.wanted.co.kr/images/company/79/elpzxpmgh94xesrf__1080_790.png"
        alt="Wanted Company Image"
        width="240px"
      />
      <CardContent>
        <CardTitle>Heading</CardTitle>
        <CardCaption>Caption</CardCaption>
        <CardCaption>Sub caption</CardCaption>
        <CardCaption>Extra caption</CardCaption>
      </CardContent>
    </Card>
  );
}

export default Demo;

import { FlexBox, Card, CardTitle, CardCaption, CardContent, CardContentItem, ContentBadge, CardThumbnailSkeleton } from '@wanteddev/wds';

const Demo = () => {
  return (
    <FlexBox gap="24px" flexDirection="column" alignItems="center">
      <Card width="240px">
        <CardThumbnailSkeleton animation={false} />
        <CardContent>
          <CardContentItem position="top" variant="badge">
            {new Array(3).fill(0).map((_, i) => (
              <ContentBadge key={i} color="neutral">Badge</ContentBadge>
            ))}
          </CardContentItem>
          <CardTitle>Heading</CardTitle>
          <CardCaption>Caption</CardCaption>
        </CardContent>
      </Card>
      <Card width="240px">
        <CardThumbnailSkeleton animation={false} />
        <CardContent>
          <CardTitle>Heading</CardTitle>
          <CardCaption>Caption</CardCaption>
          <CardContentItem position="bottom" variant="badge">
            {new Array(3).fill(0).map((_, i) => (
              <ContentBadge key={i} color="neutral">Badge</ContentBadge>
            ))}
          </CardContentItem>
        </CardContent>
      </Card>
    </FlexBox>
  );
}

export default Demo;

import { useToast, ToggleIcon, Card, CardThumbnail, CardTitle, CardCaption, CardContent, CardThumbnailContent } from '@wanteddev/wds';
import { IconBookmark, IconBookmarkFill } from '@wanteddev/wds-icon';
import { useState } from 'react';

const Demo = () => {
  const toast = useToast();
  const [isBookmarked, setIsBookmarked] = useState(false);

  return (
    <Card 
      as="a" 
      href="https://wanted.co.kr" 
      target="_blank" 
      width="240px" 
      sx={{ margin: 'auto' }}
    >
      <CardThumbnail
        src="https://static.wanted.co.kr/images/company/79/elpzxpmgh94xesrf__1080_790.png"
        alt="Wanted Company Image"
        width="240px"
        leadingContent={
          <CardThumbnailContent variant="text">
            캡션
          </CardThumbnailContent>
        }
        trailingContent={
          <CardThumbnailContent variant="toggle-icon">
            <ToggleIcon 
              active={isBookmarked} 
              onActiveChange={setIsBookmarked} 
              activeColor="semantic.primary.normal" 
              onClick={() => {
                if (!isBookmarked) {
                  toast({
                    variant: 'positive',
                    content: '북마크에 저장되었습니다.',
                  });
                }
                setIsBookmarked((prevIsBookmarked) => !prevIsBookmarked);
              }}
            >
              {isBookmarked 
                ? <IconBookmarkFill /> 
                : <IconBookmark />
              }
            </ToggleIcon>
          </CardThumbnailContent>
        }
      />
      <CardContent>
        <CardTitle>Heading</CardTitle>
        <CardCaption>Caption</CardCaption>
        <CardCaption>Sub caption</CardCaption>
        <CardCaption>Extra caption</CardCaption>
      </CardContent>
    </Card>
  );
}

export default Demo;

import { FlexBox, Card, CardThumbnail, CardTitle, CardCaption, CardContent } from '@wanteddev/wds';

const Demo = () => {
  return (
    <FlexBox gap="24px" flexDirection="column" alignItems="center">
      <Card width="240px" platform="desktop">
        <CardThumbnail
          src="https://static.wanted.co.kr/images/company/79/elpzxpmgh94xesrf__1080_790.png"
          alt="Wanted Company Image"
        />
        <CardContent>
          <CardTitle>Heading</CardTitle>
          <CardCaption>platform: desktop</CardCaption>
          <CardCaption>Sub caption</CardCaption>
          <CardCaption>Extra caption</CardCaption>
        </CardContent>
      </Card>

      <Card width="200px" platform="mobile">
        <CardThumbnail
          src="https://static.wanted.co.kr/images/company/79/elpzxpmgh94xesrf__1080_790.png"
          alt="Wanted Company Image"
        />
        <CardContent>
          <CardTitle>Heading</CardTitle>
          <CardCaption>platform: mobile</CardCaption>
          <CardCaption>Sub caption</CardCaption>
          <CardCaption>Extra caption</CardCaption>
        </CardContent>
      </Card>
    </FlexBox>
  );
}

export default Demo;

import { CardSkeleton, CardThumbnailSkeleton, CardContentItemSkeleton, CardTitleSkeleton, CardCaptionSkeleton, CardContent } from '@wanteddev/wds';

const Demo = () => {
  return (
    <CardSkeleton width="240px" sx={{ marginInline: 'auto' }}>
      <CardThumbnailSkeleton />
      <CardContent>
        <CardContentItemSkeleton />
        <CardTitleSkeleton />
        <CardCaptionSkeleton type="normal" />
        <CardCaptionSkeleton type="sub" />
        <CardCaptionSkeleton type="extra" />
        <CardContentItemSkeleton />
      </CardContent>
    </CardSkeleton>
  );
}

export default Demo;