css class component

src/components/Class/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import "./index.scss";
 import Collapse from "@material-ui/core/Collapse";
+import ExpandIcon from "./expand.png";
 
 type ClassType = {
   group_id: string;
@@ -17,6 +18,7 @@ export type Group = {
 
 interface ClassProps {
   onClassHover: (group_id: String, class_id: String) => void;
+  onClassClick: (group_id: String, class_id: String) => void;
   data: Group;
 }
 
@@ -42,11 +44,11 @@ export default class Class extends React.Component<ClassProps, ClassState> {
 
   render() {
     return (
-      <div className="class" onClick={this.Open}>
-        {this.props.data.classname}
+      <div className="class" >
+        <div className="class__name" onClick={this.Open}>{this.props.data.classname}</div>
         <Collapse in={this.state.open} timeout="auto" unmountOnExit>
-          <div className="class__group">
-            {this.props.data.classgroups.map((classgroup, index) => (
+          {this.props.data.classgroups.map((classgroup, index) => (
+            <div className="class__group">
               <p
                 onMouseOver={() =>
                   this.props.onClassHover(
@@ -54,13 +56,22 @@ export default class Class extends React.Component<ClassProps, ClassState> {
                     this.props.data.classgroups[index].group_id
                   )
                 }
+                onClick={() =>
+                  this.props.onClassClick(
+                    this.props.data.classname,
+                    this.props.data.classgroups[index].group_id
+                  )
+                }
               >
                 {classgroup.group_id} {classgroup.day} {classgroup.time}{" "}
                 {classgroup.room} <br></br> {classgroup.lecturer}
-              </p>
-            ))}
-          </div>
+              </p>{" "}
+            </div>
+          ))}
         </Collapse>
+        <div onClick={this.Open}>
+          <img alt="expand" src={ExpandIcon} className={`class__expandIcon${this.state.open?"Rotate":""}`} />
+        </div>
       </div>
     );
   }