Add some small polishing around collections

Author: sergioalvz

cms/content/collections.json

@@ -19,6 +19,10 @@
     {
       "slug": "testing",
       "name": "Testing"
+    },
+    {
+      "slug": "code-review",
+      "name": "Code Review"
     }
   ]
 }

cms/content/notes/effective-code-reviews.mdx

@@ -7,6 +7,8 @@ spoiler:
 title: "Revisiones de código efectivas"
 url: "/notes/effective-code-reviews"
 published: true
+collections:
+  - code-review
 ---
 
 # Revisiones de código efectivas

pages/collections.tsx

@@ -1,12 +1,11 @@
 import { GetStaticProps } from "next";
-import NextLink from "next/link";
 
 import { ApiCollection } from "@/cms/api/ApiCollection";
 import { getCollectionRepository } from "@/cms/repositories";
-import { Application } from "@/layouts/Application";
+import { Collections } from "@/components/Collections";
 import { Heading } from "@/components/Heading";
 import { Text } from "@/components/Text";
-import { Link } from "@/components/Link";
+import { Application } from "@/layouts/Application";
 
 type CollectionsPageProps = {
   collections: ApiCollection[];
@@ -22,15 +21,7 @@ export default function CollectionsPage(props: CollectionsPageProps) {
 
         <Text size="l">Articles are sometimes grouped into collections. Here you may find all of them.</Text>
 
-        <ul className="Page__Collections">
-          {props.collections.map((collection) => (
-            <li key={collection.slug}>
-              <Link as={NextLink} href={`/collections/${collection.slug}`}>
-                #{collection.slug}
-              </Link>
-            </li>
-          ))}
-        </ul>
+        <Collections collections={props.collections} />
       </Application.Article>
     </Application>
   );

styles/index.css

@@ -28,7 +28,6 @@
 @import "../layouts/Posts/style.css";
 
 @import "./pages/index.css";
-@import "./pages/collections.css";
 @import "./pages/collections/[slug].css";
 
 :root {