Add ExpressionSetCard component

src/components/ExpressionSetCard/ExpressionSetCard.stories.tsx

@@ -0,0 +1,24 @@
+import "../../styles/globals.css";
+import "../../styles/components.css";
+
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { ExpressionSetCard } from "./ExpressionSetCard";
+
+export default {
+  title: "Components/Expression Set Card",
+  component: ExpressionSetCard,
+} as ComponentMeta<typeof ExpressionSetCard>;
+
+const Template: ComponentStory<typeof ExpressionSetCard> = (args) => (
+  <ExpressionSetCard {...args} />
+);
+
+export const Daily = Template.bind({});
+Daily.args = {
+  id: 1,
+  name: "Daily",
+  description: "Words for daily practice",
+  word_count: 11,
+};

src/components/ExpressionSetCard/ExpressionSetCard.tsx

@@ -0,0 +1,25 @@
+export interface ExpressionSetCardProps {
+  id: number;
+  name: string;
+  description: string;
+  word_count: number;
+}
+
+export function ExpressionSetCard({
+  id,
+  name,
+  description,
+  word_count,
+}: ExpressionSetCardProps) {
+  return (
+    <article className="expression-set-card">
+      <h2 className="expression-set-card-name">
+        {name}
+        <span className="expression-set-card-word-count">
+          {word_count} word(s)
+        </span>
+      </h2>
+      <p className="expression-set-card-description">{description}</p>
+    </article>
+  );
+}

src/components/ExpressionSetCard/index.tsx

@@ -0,0 +1 @@
+export * from "./ExpressionSetCard";

src/components/Page/Page.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactNode } from "react";
+import { PropsWithChildren } from "react";
 import { Navigation } from "../Navigation";
 
 export interface PageProps {}

src/components/Page/index.ts

@@ -0,0 +1 @@
+export * from "./Page";

src/pages/index.tsx

@@ -1,9 +1,8 @@
 import type { NextPage } from "next";
-import Head from "next/head";
-import Image from "next/image";
+import { Page } from "../components/Page";
 
 const Home: NextPage = () => {
-  return <div>Hello</div>;
+  return <Page />;
 };
 
 export default Home;

src/styles/components.css

@@ -1,3 +1,8 @@
+/* This wraps the whole application, rather than just the "page" area */
+#__next {
+  background-color: darkslategray;
+}
+
 /* Page */
 
 .page {
@@ -101,3 +106,37 @@
   border-radius: 4px;
   background-color: darkslategray;
 }
+
+/* Expression set card */
+
+.expression-set-card {
+  display: flex;
+  flex-direction: column;
+
+  background-color: lavender;
+  border: 1px solid darkslategray;
+  box-shadow: 0px 5px 5px -5px darkslategray;
+  padding: 16px;
+  word-wrap: break-word;
+}
+
+.expression-set-card-name {
+  color: darkslategray;
+  font-size: 18px;
+  font-weight: bold;
+  margin: 10px 0px;
+}
+
+.expression-set-card-word-count {
+  color: slategray;
+  font-family: monospace;
+  font-size: 12px;
+  margin: 10px;
+}
+
+.expression-set-card-description {
+  color: darkslategray;
+  font-size: 15px;
+  margin: 20px 0px 10px;
+  overflow-y: auto;
+}