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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent