Add click listener to course program

inland-empire-software-development · May 3, 2020 · 32cf22c · 32cf22c
1 parent 62ee6c9
commit 32cf22c
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/src/components/landing/CourseProgramCard.tsx b/src/components/landing/CourseProgramCard.tsx
@@ -9,7 +9,7 @@ export interface CourseProgramProps {
   classTimeString: string;
 }
 
-const CourseProgramCard: React.FC<CourseProgramProps> = (props) => (
+const CourseProgramCard: React.FC<CourseProgramProps & React.HTMLAttributes<HTMLDivElement>> = (props) => (
   <div className="uk-card uk-card-default uk-card-body">
     <div className="uk-grid-divider uk-grid-match" data-uk-grid>
       <div className="uk-align-center uk-margin-remove uk-width-1-3@m">

diff --git a/src/components/landing/Landing.scss b/src/components/landing/Landing.scss
@@ -83,6 +83,10 @@ $l-breakpoint: 1200px;
   }
 
   .course-program-card {
+    li {
+      cursor: pointer;
+    }
+
     .uk-slider {
       @media screen and (max-width: $m-breakpoint - 1px) {
         margin-left: 16px;

diff --git a/src/components/landing/Landing.tsx b/src/components/landing/Landing.tsx
@@ -80,8 +80,8 @@ const Landing: React.FC<LandingProps> = (props) => {
               <div className="uk-position-relative uk-visible-toggle uk-dark" data-tabindex="-1">
                 <ul className="uk-slider-items uk-child-width-1-1 uk-grid">
                   {props.courses.map((course) => (
-                    <li key={course.id} >
-                      <CourseProgramCard onClick={props.onCourseSelected(course.id)} {...course} />
+                    <li key={course.id} onClick={() => props.onCourseSelected(course.id)}>
+                      <CourseProgramCard {...props} {...course} />
                     </li>) )}
                 </ul>
                 <a className="uk-position-center-left uk-position-small uk-hidden-hover" href="#" data-uk-slidenav-previous data-uk-slider-item="previous"></a>