<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import colors from '../../styles/Colors';

import ListNavLink from '../../containers/recordList/ListNavLink';
import { Icon } from '../../styles/Icon';

const N_TO_SHOW = 10;

const Pagination = styled.ul`
	list-style-type: none;
	padding-left: 0;
	text-align: right;
	margin: 12px 0;
`;

const Page = styled.li`
	display: inline-block;
	padding: 7px 0;
	background: #fff;
	border: 1px solid ${colors.accentPrimary};
	border-radius: 5px;
	width: 35px;
	text-align: center;

	a {
		color: ${colors.accentPrimary};
		text-decoration: none;
	}

	&.active {
		background: ${colors.accentPrimary};
		a {
			color: #fff;
		}
	}

	& + li {
		margin-left: 10px;
	}
`;

export default class Paging extends Component {
	static propTypes = {
		tableName: PropTypes.string,
		nPages: PropTypes.number,
		curPage: PropTypes.number,
		onChangePage: PropTypes.func,
	};
<commit_msg>fix: Page buttons are now clickable instead of only the text<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import colors from '../../styles/Colors';

import ListNavLink from '../../containers/recordList/ListNavLink';
import { Icon } from '../../styles/Icon';

const N_TO_SHOW = 10;

const Pagination = styled.ul`
	list-style-type: none;
	padding-left: 0;
	text-align: right;
	margin: 12px 0;
`;

const Page = styled.li`
	display: inline-block;
	border: 1px solid ${colors.accentPrimary};
	border-radius: 5px;
	text-align: center;

	a {
		display: block;
		width: 35px;
		padding: 7px 0;
		background: #fff;
		color: ${colors.accentPrimary};
		text-decoration: none;

	}

	&.active {
		a {
			background: ${colors.accentPrimary};
			color: #fff;
		}
	}

	& + li {
		margin-left: 10px;
	}
`;

export default class Paging extends Component {
	static propTypes = {
		tableName: PropTypes.string,
		nPages: PropTypes.number,
		curPage: PropTypes.number,
		onChangePage: PropTypes.func,
	};

{'fraction_non_alphanumeric': 0.14251207729468598, 'fraction_numerical': 0.01352657004830918, 'mean_word_length': 3.7939814814814814, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2871394', 'n_tokens_mistral': 773, 'n_tokens_neox': 722, 'n_words': 192}