List card

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

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

export default Demo;

import { ToggleIcon, FlexBox, Checkbox, CardList, CardTitle, CardContent, CardCaption, CardThumbnail, CardListContent } from '@wanteddev/wds';
import { IconBookmark, IconBookmarkFill } from '@wanteddev/wds-icon';
import { useState } from 'react';

const Demo = () => {
  const [checked, setChecked] = useState(false);
  const [isBookmarked, setIsBookmarked] = useState(false);

  return (
    <CardList
      sx={{ margin: 'auto' }}
      width="45%"
      leadingContent={(
        <CardListContent variant="checkbox">
          <Checkbox 
            checked={checked}
            onCheckedChange={setChecked}
          />
        </CardListContent>
      )}
      trailingContent={(
        <CardListContent variant="toggle-icon">
          <ToggleIcon 
            activeColor="semantic.primary.normal"
            active={isBookmarked}
            onActiveChange={setIsBookmarked}
          >
            {isBookmarked ? <IconBookmarkFill /> : <IconBookmark />}
          </ToggleIcon>
        </CardListContent>
      )}
    >
      <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>
      </CardContent>
    </CardList>
  );
}

export default Demo;

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

const Demo = () => {
  return (
    <FlexBox gap="24px" flexDirection="column" alignItems="center" sx={{ width: '100%' }}>
      <CardList width="45%">
        <CardThumbnailSkeleton animation={false} />
        <CardContent>
          <CardContentItem position="top" variant="badge">
            <ContentBadge color="neutral">Badge</ContentBadge>
          </CardContentItem>
          <CardTitle>Heading</CardTitle>
          <CardCaption>Caption</CardCaption>
        </CardContent>
      </CardList>
      <CardList width="45%">
        <CardThumbnailSkeleton animation={false} />
        <CardContent>
          <CardTitle>Heading</CardTitle>
          <CardCaption>Caption</CardCaption>
          <CardContentItem position="bottom" variant="badge">
            <ContentBadge color="neutral">Badge</ContentBadge>
          </CardContentItem>
        </CardContent>
      </CardList>
    </FlexBox>
  );
}

export default Demo;

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

const Demo = () => {
  return (
    <FlexBox gap="24px" flexDirection="column" alignItems="center" sx={{ width: '100%' }}>
      <CardList width="45%" 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>Extra caption</CardCaption>
        </CardContent>
      </CardList>

      <CardList width="45%" 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>Extra caption</CardCaption>
        </CardContent>
      </CardList>
    </FlexBox>
  );
}

export default Demo;

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

const Demo = () => {
  return (
    <CardListSkeleton width="45%" sx={{ marginInline: 'auto' }}>
      <CardThumbnailSkeleton />
      <CardContent>
        <CardContentItemSkeleton />
        <CardTitleSkeleton />
        <CardCaptionSkeleton type="normal" />
        <CardCaptionSkeleton type="extra" />
        <CardContentItemSkeleton />
      </CardContent>
    </CardListSkeleton>
  );
}

export default Demo;