38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import type { NextPage } from "next";
|
|
import Link from "next/link";
|
|
import { ExpressionSetCard } from "../components/ExpressionSetCard";
|
|
import { Page } from "../components/Page";
|
|
import { useExpressionData } from "../hooks/useExpressionData";
|
|
|
|
const ExpressionSetsPage: NextPage = () => {
|
|
const { expression_sets, expression_to_expression_set } = useExpressionData();
|
|
|
|
return (
|
|
<Page>
|
|
<div className="content-list">
|
|
{expression_sets.map(({ id, name, description }) => (
|
|
<Link
|
|
key={id}
|
|
href={{ pathname: "/practice", query: { "set-id": id } }}
|
|
passHref
|
|
>
|
|
<a>
|
|
<ExpressionSetCard
|
|
name={name}
|
|
description={description}
|
|
word_count={
|
|
expression_to_expression_set.filter(
|
|
(item) => item.expression_set_id === id
|
|
).length
|
|
}
|
|
/>
|
|
</a>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</Page>
|
|
);
|
|
};
|
|
|
|
export default ExpressionSetsPage;
|