Separate the shorthand of each suggestion card from the prefilled text

This commit is contained in:
sabaimran
2024-12-21 20:46:57 -08:00
parent bf405f50d7
commit 45da6ec750
3 changed files with 25 additions and 12 deletions

View File

@@ -20,7 +20,7 @@ interface StepTwoSuggestionCardProps {
}
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 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`;
const cardContent = (
@@ -48,7 +48,10 @@ export function StepTwoSuggestionCard(data: StepTwoSuggestionCardProps) {
<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" />
<ArrowRight
weight="thin"
className="w-6 h-6 text-muted-foreground inline-flex mr-1 text-opacity-40"
/>
<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`}
>
@@ -61,14 +64,14 @@ export function StepTwoSuggestionCard(data: StepTwoSuggestionCardProps) {
}
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 m-2 md:p-2 animate-fade-in-up`;
const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] cursor-pointer m-2 md:p-2 animate-fade-in-up border-none`;
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" />
<ArrowLeft className="w-6 h-6 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`}