Skip to content

Latest commit

 

History

History
260 lines (212 loc) · 6.84 KB

BaseComponents.md

File metadata and controls

260 lines (212 loc) · 6.84 KB
Raw

NFT Marketplace Base Components for Contributors

Content

  • Card
  • Input
    • Text
    • Checkbox
    • Selectbox
  • Button
  • Accordion
    • Accordion Header
  • Image

✨ Card

Card component similar div html element.

❕ Props

  • width => Card width
  • height => Card height
  • child => Card content
  • blurColor => Card radial blur color (default:rgba(48,118,234,0.2))
  • onClick => Card onClick Funtion

⚡ Usage

  • 🎉 Basic
    <Card width='250px' height='250px' />
  • 🎉 Child
    <Card width="250px" height="250px"
   child={
     <div style={{width:"100%", height:"100%",display:"flex",flexDirection:"column",justifyContent:"center", alignItems:"center"}}>
      <Button width='100px' height='50px' color={Colors.buttons.primary} textContent="Primary" />
      <Button width='100px' height='50px' color={Colors.buttons.secondary} textContent="Secondary" />
      <Button width='100px' height='50px' color={Colors.buttons.danger} textContent="Danger"/>
      <Button width='100px' height='50px' color={Colors.buttons.succes} textContent="Succes" />
     </div>
   }
/>
  • 🎉 Blur Color
          <Card width='250px' height='250px' blurColor="rgba(78, 242, 154,0.3)"/>

✨ TextInput

Input for text or number values.

❕ Props

  • width
  • height
  • placeholder (default: default input)
  • icon => TextInput right icon or button
  • type (text/number)

⚡ Usage

  • 🎉 Basic
          <TextInput width="250px" height="30px" />
  • 🎉 Placeholder
      <TextInput width="250px" height="30px"placeholder="Example Placeholder" />
  • 🎉 Icon
      <TextInput width="250px" height="30px" icon={<AiOutlineSearch size="28px" color="#32a852" />} />
  • 🎉 Type
      <TextInput width="250px" height="30px" type="text" />

✨ Checkbox

❕ Props

  • name
  • onChange

⚡ Usage

  • 🎉 Name
     <Checkbox name="Checkbox Example" />
  • 🎉 onChange
      <Checkbox name="Checkbox Example" onChange={checkboxOnChange} />
      const checkboxOnChange = () => {
      alert("checkbox is changed");
  };

✨ Select

❕ Props

  • items
  • onChange

⚡ Usage

  • 🎉 Items
    <Select items={["test1", "test2", "test3"]} />
    • Before
    • After
    • Selected
  • 🎉 onChange
      <Select
   items={["test1", "test2", "test3"]}
   onChange={selectBoxOnChange}
  />
      const selectBoxOnChange = (v) => {
      alert(`Selectbox selected value ${v}`);
  };

✨ Button

❕ Props

  • width
  • height
  • color
  • onClick
  • textColor => Hover Text Color
  • textContent => Button Name

⚡ Usage

  • 🎉 Basic
    <Button width="150px" height="30px" textContent="Primary Button" />
  • 🎉 Color
    <Button
  width="150px"
  height="30px"
  textContent="Secondary Button"
  color={Colors.buttons.secondary}
/>
  • 🎉 textColor
    <Button
  width="150px"
  height="30px"
  textContent="Danger Button"
  color={Colors.buttons.danger}
  textColor="blue"
/>
  • 🎉 onClick
    <Button
  width="150px"
  height="30px"
  textContent="Danger Button"
  color={Colors.buttons.danger}
  onClick={()=>alert('Hello World')}
  textColor="blue"
/>

✨ Image

❕ Props

  • width
  • height
  • src

⚡ Usage

  • 🎉 Basic
    <Image
  width="300px"
  height="300px"
  src="https://images.unsplash.com/photo-1593642532871-8b12e02d091c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1112&q=80"
/>

✨ Accordion

❕ Props

  • child

⚡ Usage

  • 🎉 Basic
    <Accordion width="250px" height="40px" />
  • 🎉 Child
    <Accordion
  width="250px"
  height="100px"
  child={
   <>
      <TextInput placeholder="min" />
      <TextInput placeholder="max" />
      <Button
          width="100%"
          height="40px"
          textContent="Submit"
          color={Colors.buttons.succes}
      />
  </>
  }
 />
    • After
    • Before