package Ġui . components . buttons Ċ Ċ import Ġcss . const . BORDER _ GRAY Ċ import Ġcss . const . IN ACTIVE _ GRAY Ċ import Ġcss . const . WHITE Ċ import Ġcss . text . TextStyle Ċ import Ġkotlinx . css .* Ċ import Ġkotlinx . css . properties . border Ċ import Ġkotlinx . html . js . onClick Function Ċ import Ġreact .* Ċ import Ġstyled . StyleSheet Ċ import Ġstyled . css Ċ import Ġstyled . styled Div Ċ import Ġstyled . styled P Ċ Ċ external Ġinterface ĠOption Button Props Ġ: ĠR Props Ġ{ ĊĠĠĠ Ġvar Ġlabel : ĠString ĊĠĠĠ Ġvar Ġactive : ĠBoolean ĊĊĠĠĠ Ġ// ĠCallback Ġfunction Ġwhen Ġclicked ĊĠĠĠ Ġvar Ġon Selected : Ġ() Ġ-> ĠUnit Ċ } Ċ Ċ /** Ċ Ġ* ĠA Ġgeneric Ġbutton Ġwith Ġthe Ġoption Ġto Ġcustomize , Ġcolor , Ġlabel , Ġand Ġoptional Ġicon Ċ Ġ*/ Ċ class ĠOption Button Ġ: ĠR Component < Option Button Props , ĠR State >() Ġ{ ĊĊĠĠĠ Ġoverride Ġfun ĠR Builder . render () Ġ{ ĊĠĠĠĠĠĠĠ Ġ// Ġmain Ġbutton Ġlayout ĊĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( props . active ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ Option ButtonStyle . button Active ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ġelse Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ Option ButtonStyle . button Inactive ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonClick Function Ġ= Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ// Ġon Ġclick , Ġwe Ġcall Ġthe Ġfunction Ġpassed Ġin Ġto Ġthe Ġprops ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġprops . on Selected () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ// Ġbutton Ġlabel ĊĠĠĠĠĠĠĠĠĠĠĠ Ġstyled P Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ TextStyle . option Button Label ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ props . label ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ /** Ċ Ġ* ĠReact ĠComponent ĠBuilder Ċ Ġ*/ Ċ fun ĠR Builder . option Button ( handler : ĠOption Button Props . () Ġ-> ĠUnit ): ĠReact Element Ġ{ ĊĠĠĠ Ġreturn Ġchild ( Option Button :: class ) Ġ{ ĊĠĠĠĠĠĠĠ Ġthis . attrs ( handler ) ĊĠĠĠ Ġ} Ċ } Ċ Ċ /** Ċ Ġ* ĠCSS Ċ Ġ*/ Ċ object ĠOption ButtonStyle Ġ: ĠStyleSheet (" Option ButtonStyle ", Ġis Static Ġ= Ġtrue ) Ġ{ ĊĠĠĠ Ġval Ġbutton Ġby ĠOption ButtonStyle . css Ġ{ ĊĠĠĠĠĠĠĠ Ġcursor Ġ= ĠCursor . pointer ĊĠĠĠĠĠĠĠ Ġdisplay Ġ= ĠDisplay . inline Flex ĊĠĠĠĠĠĠĠ ĠminHeight Ġ= Ġ 2 4 . px ĊĠĠĠĠĠĠĠ ĠminWidth Ġ= Ġ 1 6 0 . px ĊĠĠĠĠĠĠĠ Ġalign Self Ġ= ĠAlign . center ĊĠĠĠĠĠĠĠ ĠjustifyContent Ġ= ĠJust ify Content . center ĊĠĠĠĠĠĠĠ ĠalignItems Ġ= ĠAlign . center ĊĠĠĠĠĠĠĠ Ġborder ( width Ġ= Ġ 1 . px , Ġstyle Ġ= ĠBorder Style . solid , Ġcolor Ġ= ĠBORDER _ GRAY ) ĊĠĠĠĠĠĠĠ ĠborderRadius Ġ= Ġ 9 9 9 . px ĊĠĠĠ Ġ} ĊĠĠĠ Ġval Ġbutton Inactive Ġby ĠOption ButtonStyle . css Ġ{ ĊĠĠĠĠĠĠĠ Ġ+ button ĊĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= ĠIN ACTIVE _ GRAY ĊĠĠĠĠĠĠĠ Ġhover Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= ĠWH ITE ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġactive Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= ĠBORDER _ GRAY ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĠĠĠ Ġval Ġbutton Active Ġby ĠOption ButtonStyle . css Ġ{ ĊĠĠĠĠĠĠĠ Ġ+ button ĊĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= ĠWH ITE ĊĠĠĠĠĠĠĠ Ġhover Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= ĠIN ACTIVE _ GRAY ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġactive Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= ĠBORDER _ GRAY ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ }