add cardGridSection and Card#16
Conversation
There was a problem hiding this comment.
Is this relevant to the current branch?
There was a problem hiding this comment.
Only adjust the things necessary to this branch.
No changes needed, just keep this in mind.
| title: string | null; | ||
| content: string | null; |
There was a problem hiding this comment.
Inherit title and content from the Prisma Schema.
| title: string | null; | ||
| description: string | null; |
There was a problem hiding this comment.
Inherit title and description from the Prisma Schema.
| export interface CardGridProps { | ||
| title: string | null; | ||
| description: string | null; | ||
| CardSlot: React.ReactNode; |
There was a problem hiding this comment.
Use camelCase for props.
| return ( | ||
| <div> | ||
| {title && <h1>{title}</h1>} | ||
| {description && <div dangerouslySetInnerHTML={{ __html: description }} />} |
There was a problem hiding this comment.
We will later replace this with the WYSIWYG component.
No changes needed.
| const cards = await prisma.cards.findMany({ | ||
| where: { fkCardGrids: id }, | ||
| }); |
| title={cardGrid.title} | ||
| description={cardGrid.description} | ||
| CardSlot={cards.map((card) => ( | ||
| <CardBuilder {...card} /> |
There was a problem hiding this comment.
When using .map to iterate over React components, always add a key prop.
| <ImageComponent | ||
| path={imageInfo.path} | ||
| title={imageInfo.title || imageInfo.filenameDisk || "image"} | ||
| altText={imageInfo.title || imageInfo.filenameDisk || "image"} |
There was a problem hiding this comment.
Only use the title for the altText
| <div> | ||
| {title && <h1>{title}</h1>} | ||
| {content && <div dangerouslySetInnerHTML={{ __html: content }} />} | ||
| {backgroundSlot} | ||
| </div> |
There was a problem hiding this comment.
Wouldn't we want to put the background image on the div with css?
2 participants
No description provided.