1- import React , { useState } from 'react' ;
2- import cx from 'classnames' ;
1+ import React , { ComponentType , MouseEventHandler , SVGProps , useState } from 'react' ;
32import { SiGitlab , SiGithub , SiCircleci } from 'react-icons/si' ;
4- import { useColorMode } from '@docusaurus/theme-common' ;
53import Section from '@site/src/components/pages/home/section/section' ;
6- import styles from './section.module.scss ' ;
4+ import FadeIntoView from '@site/src/components/molecules/animations/fade-into-view ' ;
75
86const currencyToSymbol = ( currency : string ) => {
97 switch ( currency ) {
@@ -27,81 +25,100 @@ const currencyToSymbol = (currency: string) => {
2725 }
2826} ;
2927
28+ const list = [
29+ {
30+ name : 'github' ,
31+ logo : SiGithub ,
32+ } ,
33+ {
34+ name : 'gitlab' ,
35+ logo : SiGitlab ,
36+ } ,
37+ {
38+ name : 'circleci' ,
39+ logo : SiCircleci ,
40+ } ,
41+ ] ;
42+
43+ type ButtonProps = {
44+ name : string ;
45+ isSelected : boolean ;
46+ onClick : MouseEventHandler < HTMLButtonElement > ;
47+ logo : ComponentType < SVGProps < SVGSVGElement > > ;
48+ } ;
49+
50+ const Button = ( { name, onClick, isSelected, logo : Logo } : ButtonProps ) => {
51+ const isSelectedClassNames = isSelected
52+ ? '!border-primary-light !dark:border-primary-dark border-4'
53+ : '' ;
54+
55+ return (
56+ < button
57+ onClick = { onClick }
58+ className = { `rounded-md p-1 mx-1 aspect-square w-11 h-11 transition-all duration-300 cursor-pointer bg-transparent border border-solid border-secondary-light dark:border-secondary-dark ${ isSelectedClassNames } }
59+ type = "button"
60+ >
61+ < Logo className = "w-5 h-5" aria-label = { name } />
62+ </ button >
63+ ) ;
64+ } ;
65+
3066const PricingSection = ( ) => {
3167 const [ minutes , setMinutes ] = useState ( 0 ) ;
3268 const [ currency , setCurrency ] = useState ( 'EUR' ) ;
33- const [ selectedVsc , setVsc ] = useState ( 0 ) ;
34- const { colorMode } = useColorMode ( ) ;
35- const isDarkTheme = colorMode === 'dark' ;
36-
37- const backgroundClassName = isDarkTheme ? 'bg-black' : 'bg-white' ;
38- const totalPriceBackgroundClassName = isDarkTheme ? 'bg-gray-800' : 'bg-gray-200' ;
69+ const [ selectedVsc , setVsc ] = useState ( 'github' ) ;
3970
4071 return (
41- < Section className = { styles . pricingSection } >
42- < h2 className = { cx ( 'text-center text-5xl font-bold mb-10' , styles . title ) } >
43- Pricing calculator
44- </ h2 >
45-
46- < div className = "p-3 rounded-md flex gap-3 h-52" >
47- < div className = { `${ backgroundClassName } } >
48- < div >
49- < button
50- onClick = { ( ) => setVsc ( 0 ) }
51- className = { `${ styles . vscButton } ${ selectedVsc === 0 && styles . selected } }
52- type = "button"
53- >
54- < SiGithub />
55- </ button >
56- < button
57- onClick = { ( ) => setVsc ( 1 ) }
58- className = { `${ styles . vscButton } ${ selectedVsc === 1 && styles . selected } }
59- type = "button"
60- >
61- < SiGitlab />
62- </ button >
63- < button
64- onClick = { ( ) => setVsc ( 2 ) }
65- className = { `${ styles . vscButton } ${ selectedVsc === 2 && styles . selected } }
66- type = "button"
67- >
68- < SiCircleci />
69- </ button >
70- < br />
71- </ div >
72- < label htmlFor = "minutes" >
73- < h4 > Minutes:</ h4 >
74- < div className = "flex items-center gap-1" >
75- < input
76- id = "minutes"
77- min = { 0 }
78- max = { 1000 }
79- defaultValue = { 0 }
80- type = "range"
81- onChange = { ( event ) => {
82- setMinutes ( Number . parseInt ( event . target . value , 10 ) ) ;
83- } }
84- />
85- < span className = "w-8" > { minutes <= 999 ? minutes : < > ∞</ > } </ span >
72+ < Section title = "Pricing calculator" >
73+ < FadeIntoView >
74+ < div className = "p-3 rounded-md flex gap-3 h-52 bg-primary-light dark:bg-primary-dark" >
75+ < div className = "bg-white dark:bg-black p-3 rounded-md flex flex-col justify-between" >
76+ < div >
77+ { list . map ( ( { name, logo } ) => (
78+ < Button
79+ key = { name }
80+ name = { name }
81+ isSelected = { selectedVsc === name }
82+ logo = { logo }
83+ onClick = { ( ) => setVsc ( name ) }
84+ />
85+ ) ) }
8686 </ div >
87- </ label >
88- </ div >
87+ < label htmlFor = "minutes" >
88+ < p className = "font-bold" > Minutes:</ p >
89+ < div className = "flex items-center gap-1" >
90+ < input
91+ name = "minutes"
92+ min = { 0 }
93+ max = { 1000 }
94+ defaultValue = { 0 }
95+ type = "range"
96+ step = { 10 }
97+ onChange = { ( event ) => {
98+ setMinutes ( Number . parseInt ( event . target . value , 10 ) ) ;
99+ } }
100+ />
101+ < span className = "w-8" > { minutes === 1000 ? < > ∞</ > : minutes } </ span >
102+ </ div >
103+ </ label >
104+ </ div >
89105
90- < div className = { `${ backgroundClassName } } >
91- < select onChange = { ( event ) => setCurrency ( event . target . value ) } >
92- < option value = "EUR" > EUR €</ option >
93- < option value = "USD" > USD $</ option >
94- < option value = "ILS" > ILS ₪</ option >
95- < option value = "CAD" > CAD $</ option >
96- < option value = "AUD" > AUD $</ option >
97- < option value = "RUB" > RUB ₽</ option >
98- < option value = "JYP" > JYP ¥</ option >
99- </ select >
100- < span className = { `${ totalPriceBackgroundClassName } } >
101- < h5 className = "m-0 text-center" > 0.00 { currencyToSymbol ( currency ) } </ h5 >
102- </ span >
106+ < div className = "bg-white dark:bg-black p-3 rounded-md flex flex-col justify-between" >
107+ < select onChange = { ( event ) => setCurrency ( event . target . value ) } aria-label = "currency" >
108+ < option value = "EUR" > EUR €</ option >
109+ < option value = "USD" > USD $</ option >
110+ < option value = "ILS" > ILS ₪</ option >
111+ < option value = "CAD" > CAD $</ option >
112+ < option value = "AUD" > AUD $</ option >
113+ < option value = "RUB" > RUB ₽</ option >
114+ < option value = "JYP" > JYP ¥</ option >
115+ </ select >
116+ < span className = "bg-gray-200 dark:bg-gray-800 p-2 rounded-sm" >
117+ < p className = "m-0 text-center font-bold" > 0.00 { currencyToSymbol ( currency ) } </ p >
118+ </ span >
119+ </ div >
103120 </ div >
104- </ div >
121+ </ FadeIntoView >
105122 </ Section >
106123 ) ;
107124} ;
0 commit comments