Update the home page suggestion cards

- Rather than chunky generic cards, make the suggested actions more action oriented, around the problem a user might want to solve. Give them follow-up options. Design still in progress.

src/interface/web/app/components/suggestions/suggestionCard.tsx

@@ -1,25 +1,32 @@
 "use client";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardDescription } from "@/components/ui/card";
 
 import styles from "./suggestions.module.css";
-import { converColorToBgGradient } from "@/app/common/colorUtils";
 import { convertSuggestionTitleToIconClass } from "./suggestionsData";
+import { ArrowLeft, ArrowRight } from "@phosphor-icons/react";
 
-interface SuggestionCardProps {
+interface StepOneSuggestionCardProps {
     title: string;
     body: string;
-    link: string;
     color: string;
 }
 
-export default function SuggestionCard(data: SuggestionCardProps) {
-    const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] md:h-[180px] cursor-pointer md:p-2`;
+interface StepOneSuggestionRevertCardProps extends StepOneSuggestionCardProps {
+    onClick: () => void;
+}
+
+interface StepTwoSuggestionCardProps {
+    prompt: string;
+}
+
+export function StepOneSuggestionCard(data: StepOneSuggestionCardProps) {
+    const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] cursor-pointer md:p-2`;
     const descriptionClassName = `${styles.text} dark:text-white`;
 
     const cardContent = (
         <Card className={cardClassName}>
             <div className="flex w-full">
-                <CardContent className="m-0 p-2 w-full">
+                <CardContent className="m-0 p-2 w-full flex flex-row">
                     {convertSuggestionTitleToIconClass(data.title, data.color.toLowerCase())}
                     <CardDescription
                         className={`${descriptionClassName} sm:line-clamp-2 md:line-clamp-4 pt-1 break-words whitespace-pre-wrap max-w-full`}
@@ -31,11 +38,45 @@ export default function SuggestionCard(data: SuggestionCardProps) {
         </Card>
     );
 
-    return data.link ? (
-        <a href={data.link} className="no-underline">
-            {cardContent}
-        </a>
-    ) : (
-        cardContent
+    return cardContent;
+}
+
+export function StepTwoSuggestionCard(data: StepTwoSuggestionCardProps) {
+    const cardClassName = `${styles.card} md:h-fit sm:w-full h-fit cursor-pointer md:p-2`;
+
+    return (
+        <Card className={cardClassName}>
+            <div className="flex w-full items-center">
+                <CardContent className="m-0 p-2 w-full flex flex-row items-center">
+                    <ArrowRight className="w-6 h-6 text-muted-foreground inline-flex mr-1" />
+                    <CardDescription
+                        className={`sm:line-clamp-2 md:line-clamp-4 break-words whitespace-pre-wrap max-w-full text-sm text-wrap text-black dark:text-white`}
+                    >
+                        {data.prompt}
+                    </CardDescription>
+                </CardContent>
+            </div>
+        </Card>
+    );
+}
+
+export function StepOneSuggestionRevertCard(data: StepOneSuggestionRevertCardProps) {
+    const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] cursor-pointer md:p-2 animate-fade-in-up`;
+    const descriptionClassName = `${styles.text} dark:text-white`;
+
+    return (
+        <Card className={cardClassName} onClick={data.onClick}>
+            <div className="flex w-full">
+                <CardContent className="m-0 p-2 w-full flex flex-row">
+                    <ArrowLeft className="w-4 h-4 text-muted-foreground inline-flex mr-1" />
+                    {convertSuggestionTitleToIconClass(data.title, data.color.toLowerCase())}
+                    <CardDescription
+                        className={`${descriptionClassName} sm:line-clamp-2 md:line-clamp-4 pt-1 break-words whitespace-pre-wrap max-w-full`}
+                    >
+                        {data.body}
+                    </CardDescription>
+                </CardContent>
+            </div>
+        </Card>
     );
 }