{"size": 820, "ext": "js", "max_stars_repo_path": "client/src/components/SeriesPage.js", "max_stars_repo_name": "JichenZhang/AvidReaders", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/components/SeriesPage.js", "max_issues_repo_name": "JichenZhang/AvidReaders", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/components/SeriesPage.js", "max_forks_repo_name": "JichenZhang/AvidReaders", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.8484848485, "max_line_length": 55, "alphanum_fraction": 0.6}
import React, { useState } from 'react';

import { useSelector, useStore } from 'react-redux'
import {HomeFilled} from '@ant-design/icons'

import './DetailPages.scss'

export default function SeriesPage() {
  const User_Name = useSelector(state=>state.User_Name)
  const typeBar = (
    <div className="type-bar">
      <HomeFilled className="home-icon" />
      <span
        className="type-span"
        style={{ borderBottomWidth: '0px' }}
      >Book</span>
      <span
        className="type-span"
        style={{ borderBottomWidth: '0px' }}
      >Author</span>
      <span
        className="type-span"
        style={{ borderBottomWidth: '4px' }}
      >Series</span>
    </div>
  )
  return (
    <div className="book-page">
      <div className="userName">{User_Name}</div>
      {typeBar}
    </div>
  )
}