briefy-design
v1.1.12
Published
π _**<a href="https://briefy-storybook.vercel.app">storybook deploy link</a>**_
Downloads
13
Readme
briefy storybook
π storybook deploy link
Installation
npm i -D briefy-design
Usage
Button
import { Button } from 'briefy-design'
function MainPage() {
return (
<Button
onClick={() => alert('click!')}
title="name"
size="medium"
mode="lineBlue"
/>
)
}
Input
import { Input } from 'briefy-design'
function MainPage() {
return (
<Input
type="text"
mode="red"
placeholder="νμ΄ν μ
λ ₯"
onChange={(e: ChangeEvent<HTMLInputElement>) => console.log(e.target.value)}
/>
)
}
Interest
import { Interest } from 'briefy-design'
function MainPage() {
return (
<Interest title="λΉμ§λμ€" onClick={(title: string) => alert(title)} />
)
}
ArticleCard
import { ArticleCard } from 'briefy-design'
function MainPage() {
return (
<ArticleCard
data={{
category: ['λ΄λ', 'κ²½μ '],
title: 'μ΄μ€λΌμ-νλ μ€νμΈ νλ§μ€ μ μ (8) : μ§μνΈκ³Ό ν΄μ ',
src: 'μ΄λ―Έμ§κ²½λ‘',
percent: '75%',
}}
mode="unread"
onClick={() => alert('ν΄λ¦!')}
/>
)
}
NewsLetterCard
import { NewsLetterCard } from 'briefy-design'
function MainPage() {
return (
<NewsLetterCard
src="μ΄λ―Έμ§κ²½λ‘"
title="λ΄λ"
category="κ²½μ "
description="μκ°μ΄ μμ΄λ μΈμμ κΆκΈνλκΉ! μΈμ λμκ°λ μμμ μ½κ³ μ¬λ―Έμκ² λ°μ보μΈμ"
onClick={() => alert('λ΄μ€λ ν°')}
/>
)
}