feb-dain / layout-component

Container, FlexContainer, Tab 등 레이아웃 컴포넌트 구현

Yummy Design Component (TS)

Hi! You can create website or app with this library. Before using this, look through Storybook.

📚 Storybook

Get started!

✅ 1. Install this library.

npm

npm i yummy-design-component

yarn

yarn add yummy-design-component

✅ 2. Import components into your file.

import { Container } from 'yummy-design-component';
import { FlexContainer } from 'yummy-design-component';
import { FlexItem } from 'yummy-design-component';
import { Grid } from 'yummy-design-component';

✅ 3. Use it like this!

// Header.tsx

const Header = () => {
  return (
    <FlexContainer tag="header" layout="centerLeft" columnGap={12} px={16}>
      <h1 css={{ fontWeight: 600, fontSize: 16 }}>LOGO</h1>
      <nav>
        <FlexContainer tag="ul" columnGap={12}>
          {Array.from({ length: 4 }, (_, index) => (
            <li>
              <a href={`/MENU${index}`} key={index}>
                MENU{index + 1}
              </a>
            </li>
          ))}
        </FlexContainer>
      </nav>
      <button type="button" aria-label="login" css={{ marginLeft: 'auto' }}>
        LOGIN
      </button>
    </FlexContainer>
  );
};

Development Environment

• react (with vite)
• typeScript
• emotion

Browser Support

Latest ✓	Latest ✓