Skip to content

Pack of components made by me, around 30 in final version might be good number to do. WIP>.

Notifications You must be signed in to change notification settings

rnied137/Components-Pack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

66 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Pack of components made by me, around 30 in final version might be good number to do. WIP>.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published