{"size": 1166, "ext": "js", "max_stars_repo_path": "src/layouts/Sidebar.js", "max_stars_repo_name": "de4th-zone/frontend-blog-example", "max_stars_repo_stars_event_min_datetime": "2021-08-21T03:27:13.000Z", "max_stars_repo_stars_event_max_datetime": "2021-08-21T03:27:13.000Z", "max_issues_repo_path": "src/layouts/Sidebar.js", "max_issues_repo_name": "de4th-zone/frontend-blog-example", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/layouts/Sidebar.js", "max_forks_repo_name": "de4th-zone/frontend-blog-example", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.5, "max_line_length": 118, "alphanum_fraction": 0.5926243568}
import { isEmpty } from 'lodash';
import React from 'react';
import useSWR from 'swr';

import CustomLink from '@/common/components/CustomLink';

const Sidebar = () => {
	const { data: categories } = useSWR(`/categories`, {
		revalidateOnFocus: false
	});

	return (
		<>
			{!categories ? (
				<div className="">
					<ul className="list-group list-group-flush">
						<li className="list-group-item px-0 py-0">Loading...</li>
					</ul>
				</div>
			) : (
				!isEmpty(categories?.data) && (
					<div className="">
						<div className="pb-2">
							<h5 className="mb-0 font-monospace">Categories</h5>
						</div>
						<ul className="list-group list-group-flush">
							{categories?.data?.map((category) => (
								<li className="list-group-item d-flex justify-content-between align-items-center px-0 py-2" key={category.id}>
									<CustomLink href={`/category/${category.slug}`} className="text-decoration-none text-dark">
										{category.title}
									</CustomLink>
									<span className="badge bg-secondary">{category.total_articles}</span>
								</li>
							))}
						</ul>
					</div>
				)
			)}
		</>
	);
};

export default Sidebar;
