Skip to content

Latest commit

 

History

History
114 lines (75 loc) · 3.39 KB

README.md

File metadata and controls

114 lines (75 loc) · 3.39 KB

Components-Pack

Components made by me@ Szelma139

Calendar - React implementation of https://leemartin.medium.com/ calendar - moment.js

CalendarV2 - my own implementation with vanilla js (in react) and previous/next days grayed out. My own algorithm.


ColorPalette - palette to change website color

Autocomplete input - input with autocomplete functionality, just pass array of autocomplete items to it and use as normal input


DatePicker - input to choosing month/year and day (vanilla js)


old Version

Multi-Step form - implementation of multi step (form remains it's state between even when switching current step (lifting state))

Card - with color and image src props. Creates nice looking cards. Data is fake only used for showcase. Inspirated but similiar card found in google images, created my own version with styled components.

CreditCard - Preview/Generator (Card info is fake, only used for showcase)
Rev2

Old version

Circle Chart Widget / props: color /fill level etc.

PieChart

SkillProgression/Task completion widget 

<SkillProgression
          color="green"
          percentValue="11"
          month="March"
          dayDate="2"
          skillName="Practice"
        />

Category Tag with opacity of background 0.5 of color passed to it. 

 <Card width="150px">
      <CategoryTag />
        <CategoryTag color="245,34,54">Cooperative</CategoryTag>
        <CategoryTag color="235,235,0">Ewelina</CategoryTag>
        <CategoryTag color="165,235,0"/>       
        <CategoryTag color="15,95,255"/>       
         <CategoryTag color="155,55,150"/>    
         <CategoryTag color="78,79,80"/>    
         <CategoryTag color="20,199,180"/>  

           </Card>

Switch


<Switch/>
      <Switch primaryBackground="DAA052" secondaryBackground="#321EFD" primaryDotColour="#7DC26E" secondaryDotColour="FA8A43"/>
      <Switch primaryBackground="#9B002F" secondaryBackground="#FFD786" primaryDotColour="#FF6F91" secondaryDotColour="#F5AD49"/>
      <Switch primaryBackground="#00BAFF" secondaryBackground="#5E8255" primaryDotColour="#DEF8D6" secondaryDotColour="#035506"/>
      <Switch primaryBackground="#862700" secondaryBackground="#F9F871" primaryDotColour="#D22FF5" secondaryDotColour="cyan"/>
      <Switch primaryBackground="#D0FA11" secondaryBackground="#321EFD" primaryDotColour="#D22FF5" secondaryDotColour="##90F50A"/>
      <Switch primaryBackground="#FF6F91" secondaryBackground="#FD1EB4" primaryDotColour="#FFD786" secondaryDotColour="#9156F5"/>
      <Switch primaryBackground="#1EF3FA" secondaryBackground="#DAA052" primaryDotColour="black" secondaryDotColour="#845EC2" />

This one inspired by figma @nightborn, I copied his design and put it inside react component. Might be easly transformed to interactive version, will do it someday. Not now.