package Ġcom . accord desk . frontend Ċ Ċ import Ġcom . accord desk . frontend . dem oplay list . main App Ċ import Ġcom . accord desk . frontend . example component . example Card Ċ import Ġcom . accord desk . frontend . example component . generic Card Ċ import Ġcom . accord desk . frontend . ui . header . header Ċ import Ġcom . pal ant ir . blueprint js . core . Button Ċ import Ġkotlinx . browser . document Ċ import Ġkotlinx . css . margin Top Ċ import Ġkotlinx . css . px Ċ import Ġreact . child Ċ import Ġreact . dom . p Ċ import Ġreact . dom . render Ċ import Ġstyled . css Ċ import Ġstyled . styled Hr Ċ Ċ data Ġclass ĠVideo ( val Ġid : ĠInt , Ġval Ġtitle : ĠString , Ġval Ġartist : ĠString , Ġval Ġvideo Url : ĠString ) Ċ Ċ val Ġun w atched Videos Ġ= ĠlistOf ( ĊĠĠĠ ĠVideo ( 1 , Ġ" I ĠEngineer ", Ġ" Anim otion ", Ġ" https :// www . youtube . com / watch ? v = ze fa Qg P qq ac "), ĊĠĠĠ ĠVideo ( 2 , Ġ" B ass ĠSo lo ", Ġ" Pa ul ĠSimon ", Ġ" https :// www . youtube . com / watch ? v = w RM X QA 3 GL 4 o "), ĊĠĠĠ ĠVideo ( 3 , Ġ" Val iant ", Ġ" Bug ge ĠW essel to ft ", Ġ" https :// www . youtube . com / watch ? v = Qr M 9 q 7 E ER LI "), ĊĠĠĠ ĠVideo ( 4 , Ġ" In Ġthe ĠEnd Ġ( M ellen ĠG i ĠRem ix )", Ġ" Tom me e ĠPro fit t ", Ġ" https :// www . youtube . com / watch ? v = I 7 - i _ h Tw KA 4 ") Ċ ) Ċ val Ġw atched Videos Ġ= ĠlistOf ( ĊĠĠĠ ĠVideo ( 5 , Ġ" Word ĠUp ", Ġ" C ame o ", Ġ" h https :// www . youtube . com / watch ? v = MZ j A ant ups A ") Ċ ) Ċ Ċ fun Ġmain () Ġ{ ĊĠĠĠ Ġkotlin ext . js . require ("@ blueprint js / core / lib / css / blueprint . css ") ĊĠĠĠ Ġ// Ġkotlin ext . js . require ("@ blueprint js / core / lib / css / blueprint - icons . css ") ĊĠĠĠ Ġval Ġroot Ġ= Ġdocument . getElementById (" root ") Ġ?: Ġthrow ĠIllegalStateException (" div # root Ġnot Ġfound , Ġcannot Ġattach Ġapplication Ġto ĠDOM ") ĊĠĠĠ Ġrender ( root ) Ġ{ ĊĠĠĠĠĠĠĠ Ġchild ( header ) Ġ{ Ġ Ġ} ĊĠĠĠĠĠĠĠ Ġchild ( generic Card (" header 3 ")) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġp Ġ{ Ġ+" paragraph Ġtext Ġh 3 " Ġ} ĊĠĠĠĠĠĠĠ Ġ} Ċ // ĠĠĠĠĠĠĠ Ġchild ( example Select ) Ġ{ Ġ} ĊĠĠĠĠĠĠĠ Ġchild ( example Card ) Ġ{ Ġ} ĊĠĠĠĠĠĠĠ Ġchild ( main App ) Ġ{ ĊĠĠĠĠĠĠĠ Ġ} Ċ // ĠĠĠĠĠĠĠ Ġchild ( demo GridLayout ) Ġ{ Ċ // ĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġstyled Hr Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠmarginTop Ġ= Ġ 2 0 . px ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġchild ( Button :: class ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . active Ġ= Ġtrue ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . icon Ġ= Ġ" document - open " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . text Ġ= Ġ" ĠMy Ġfirst ĠBlueprint JS ĠButton " ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ