Add ExpressionCard component

src/components/ExpressionCard/ExpressionCard.stories.tsx

@@ -0,0 +1,30 @@
+import '../../styles/globals.css'
+import '../../styles/components.css'
+
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { ExpressionCard } from './ExpressionCard';
+
+export default {
+  title: 'Components/Expression Card',
+  component: ExpressionCard,
+} as ComponentMeta<typeof ExpressionCard>;
+
+const Template: ComponentStory<typeof ExpressionCard> = (args) => <ExpressionCard {...args} />;
+
+export const Hidden = Template.bind({});
+Hidden.args = {
+    categories: ["category_A", "category_B"],
+    description: "Description of this noun",
+    prompt: "The noun",
+    show_description: false
+}
+
+export const Revealed = Template.bind({});
+Revealed.args = {
+    categories: ["category_A", "category_B"],
+    description: "Description of this noun",
+    prompt: "The noun",
+    show_description: true
+}

src/components/ExpressionCard/ExpressionCard.tsx

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+
+export interface ExpressionCardProps {
+    prompt: string;
+    categories: string[];
+    description: ReactNode;
+    show_description?: boolean;
+}
+
+export function ExpressionCard({ prompt, categories, description, show_description }: ExpressionCardProps) {
+    return (
+        <article className="expression-card">
+            <h2 className="expression-card-prompt">{prompt}</h2>
+            <h3 className="expression-card-categories">{categories.join(", ")}</h3>
+            {show_description && <div className="expression-card-details">{description}</div>}
+        </article>
+    );
+}

src/components/ExpressionCard/index.ts

@@ -0,0 +1 @@
+export * from './ExpressionCard';

src/components/index.ts

@@ -0,0 +1 @@
+export * from './ExpressionCard'

src/pages/_app.tsx

@@ -1,4 +1,5 @@
 import '../styles/globals.css'
+import '../styles/components.css'
 import type { AppProps } from 'next/app'
 
 function MyApp({ Component, pageProps }: AppProps) {

src/styles/components.css

@@ -0,0 +1,51 @@
+.expression-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-card-prompt {
+    color: darkslategray;
+    font-size: 18px;
+    font-weight: bold;
+    margin: 10px 0px;
+}
+
+.expression-card-categories {
+    color: slategray;
+    font-family: monospace;
+    font-size: 12px;
+    margin: 10px 0px;
+}
+
+.expression-card-details {
+    color: darkslategray;
+    font-size: 15px;
+    margin: 20px 0px 10px;
+    overflow-y: auto;
+}
+
+.expression-card-details::-webkit-scrollbar-track
+{
+  background-color: lightslategray;
+  border-radius: 4px;
+}
+
+.expression-card-details::-webkit-scrollbar
+{
+  border-radius: 4px;
+  width: 8px;
+  padding-left: 14px;
+}
+
+.expression-card-details::-webkit-scrollbar-thumb
+{
+  border-radius: 4px;
+  background-color: darkslategray;
+}