ClassItemWrapper.tsx

import * as React from "react";
import { NavLink } from "react-router-dom";
import styled from "styled-components";
import { HSpacing, ListItem } from "../../../stylesheets/Mixins";
import { px } from "../../../stylesheets/Units";
import { ClassItemWrapperBase } from "./ClassItemWrapperBase";

export class ClassItemWrapper extends ClassItemWrapperBase {
	protected Code = styled.div`
		font-weight: bold;
		justify-self: center;
		align-self: center;
	`;

	protected Title = styled.div`
		align-self: center;
		justify-self: start;
	`;

	protected InnerDiv = styled.div`
		display: flex;
		color: #000;

		${HSpacing(px(20))};

		&.active {
			color: white;
			background-color: #236aa7;

			&:after {
				border-bottom-color: transparent;
			}
		}
	`;

	protected Wrapper = styled(NavLink)`
		${ListItem()};
		text-decoration: none;
		padding-right: 20px;
		padding-left: 20px;
	`;

	public render() {
		const { course, clazz } = this.props;

		const { Code, Title, InnerDiv, Wrapper } = this;

		return (
			<Wrapper
				activeClassName="active"
				to={`/courses/${course.code}/${clazz.code}`}>
				<InnerDiv>
					<Code>{clazz.code}</Code>

					<Title>{clazz.title}</Title>
				</InnerDiv>
			</Wrapper>
		);
	}
}