Base Components is Completed!

[yessGlory17]

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