fix: testimonials alignment #3513
Conversation
Pulkitxm
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThe pull request focuses on refining the Changes
Assessment against linked issues
Suggested Labels
Suggested Reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
asyncapi-bot
requested review from
devilkiller-ag,
sambhavgupta0705,
BhaswatiRoy,
J0SAL,
TRohit20 and
VaishnaviNandakumar
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-3513--asyncapi-website.netlify.app/ |
| @@ -12,38 +12,47 @@ interface TestimonialProps { | |||
| } | |||
|
|
|||
| /** | |||
| * @description This component displays Testimonial component. | |||
| * @description This component displays a Testimonial card with consistent spacing and alignment. | |||
There was a problem hiding this comment.
No need to change the commen over here.
There was a problem hiding this comment.
Please fix the lint errors.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
components/Testimonial.tsx (2)
32-34: Consider a single-line className assignment if project style rules mandate it.
The multiline usage of className might conflict with Prettier’s formatting rules. Converting it to a single line might be preferred if that’s the agreed-upon style.-<li - className={`flex flex-col gap-6 p-6 sm:px-8 sm:py-6 md:flex-row md:gap-8 md:p-8 ${className}`} -> +<li className={`flex flex-col gap-6 p-6 sm:px-8 sm:py-6 md:flex-row md:gap-8 md:p-8 ${className}`}>🧰 Tools
🪛 eslint
[error] 32-34: Replace
⏎······className={flex·flex-col·gap-6·p-6·sm:px-8·sm:py-6·md:flex-row·md:gap-8·md:p-8·${className}}⏎····with·className={flex·flex-col·gap-6·p-6·sm:px-8·sm:py-6·md:flex-row·md:gap-8·md:p-8·${className}}(prettier/prettier)
35-55: Use single quotes for JSX attributes to comply with lint rules.
If your project is configured to enforce single quotes for JSX markup, replace all double quotes accordingly.Example fix for lines 35–55:
-<blockquote className="flex flex-col gap-6 text-left md:flex-grow"> +<blockquote className='flex flex-col gap-6 text-left md:flex-grow'> -<div className="relative text-lg font-medium leading-7 text-gray-600"> +<div className='relative text-lg font-medium leading-7 text-gray-600'> -<IconQuote className="absolute left-0 top-0 h-8 w-8 -translate-y-2 text-primary-500" /> +<IconQuote className='absolute left-0 top-0 h-8 w-8 -translate-y-2 text-primary-500' /> -<Paragraph className="relative pl-12">{text}</Paragraph> +<Paragraph className='relative pl-12'>{text}</Paragraph> -<footer className="flex items-center gap-4"> +<footer className='flex items-center gap-4'> -<figure className="flex-shrink-0 rounded-full border-2 border-white"> +<figure className='flex-shrink-0 rounded-full border-2 border-white'> -<img - className="w-12 h-12 rounded-full" - src={authorAvatar} - alt={authorName} - data-testid="Testimonial-img" -/> +<img + className='w-12 h-12 rounded-full' + src={authorAvatar} + alt={authorName} + data-testid='Testimonial-img' +/> -<p className="text-base font-bold leading-6 text-gray-900"> +<p className='text-base font-bold leading-6 text-gray-900'> -<p className="text-sm font-medium leading-5 text-primary-500"> +<p className='text-sm font-medium leading-5 text-primary-500'>🧰 Tools
🪛 eslint
[error] 35-35: Replace
"flex·flex-col·gap-6·text-left·md:flex-grow"with'flex·flex-col·gap-6·text-left·md:flex-grow'(prettier/prettier)
[error] 35-35: Unexpected usage of doublequote.
(jsx-quotes)
[error] 36-36: Replace
"relative·text-lg·font-medium·leading-7·text-gray-600"with'relative·text-lg·font-medium·leading-7·text-gray-600'(prettier/prettier)
[error] 36-36: Unexpected usage of doublequote.
(jsx-quotes)
[error] 37-37: Replace
"absolute·left-0·top-0·h-8·w-8·-translate-y-2·text-primary-500"with'absolute·left-0·top-0·h-8·w-8·-translate-y-2·text-primary-500'(prettier/prettier)
[error] 37-37: Unexpected usage of doublequote.
(jsx-quotes)
[error] 38-38: Replace
"relative·pl-12"with'relative·pl-12'(prettier/prettier)
[error] 38-38: Unexpected usage of doublequote.
(jsx-quotes)
[error] 40-40: Replace
"flex·items-center·gap-4"with'flex·items-center·gap-4'(prettier/prettier)
[error] 40-40: Unexpected usage of doublequote.
(jsx-quotes)
[error] 41-41: Replace
"flex-shrink-0·rounded-full·border-2·border-white"with'flex-shrink-0·rounded-full·border-2·border-white'(prettier/prettier)
[error] 41-41: Unexpected usage of doublequote.
(jsx-quotes)
[error] 42-47: Replace
⏎··············className="w-12·h-12·rounded-full"⏎··············src={authorAvatar}⏎··············alt={authorName}⏎··············data-testid="Testimonial-img"⏎···········with·className='w-12·h-12·rounded-full'·src={authorAvatar}·alt={authorName}·data-testid='Testimonial-img'(prettier/prettier)
[error] 43-43: Unexpected usage of doublequote.
(jsx-quotes)
[error] 46-46: Unexpected usage of doublequote.
(jsx-quotes)
[error] 50-52: Replace
"text-base·font-bold·leading-6·text-gray-900">⏎··············{authorName}⏎············with'text-base·font-bold·leading-6·text-gray-900'>{authorName}(prettier/prettier)
[error] 50-50: Unexpected usage of doublequote.
(jsx-quotes)
[error] 53-55: Replace
"text-sm·font-medium·leading-5·text-primary-500">⏎··············{authorDescription}⏎············with'text-sm·font-medium·leading-5·text-primary-500'>{authorDescription}(prettier/prettier)
[error] 53-53: Unexpected usage of doublequote.
(jsx-quotes)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/Testimonial.tsx(1 hunks)
🧰 Additional context used
🪛 eslint
components/Testimonial.tsx
[error] 29-29: Delete ,
(prettier/prettier)
[error] 29-29: Unexpected trailing comma.
(comma-dangle)
[error] 32-34: Replace ⏎······className={flex·flex-col·gap-6·p-6·sm:px-8·sm:py-6·md:flex-row·md:gap-8·md:p-8·${className}}⏎···· with ·className={flex·flex-col·gap-6·p-6·sm:px-8·sm:py-6·md:flex-row·md:gap-8·md:p-8·${className}}
(prettier/prettier)
[error] 35-35: Replace "flex·flex-col·gap-6·text-left·md:flex-grow" with 'flex·flex-col·gap-6·text-left·md:flex-grow'
(prettier/prettier)
[error] 35-35: Unexpected usage of doublequote.
(jsx-quotes)
[error] 36-36: Replace "relative·text-lg·font-medium·leading-7·text-gray-600" with 'relative·text-lg·font-medium·leading-7·text-gray-600'
(prettier/prettier)
[error] 36-36: Unexpected usage of doublequote.
(jsx-quotes)
[error] 37-37: Replace "absolute·left-0·top-0·h-8·w-8·-translate-y-2·text-primary-500" with 'absolute·left-0·top-0·h-8·w-8·-translate-y-2·text-primary-500'
(prettier/prettier)
[error] 37-37: Unexpected usage of doublequote.
(jsx-quotes)
[error] 38-38: Replace "relative·pl-12" with 'relative·pl-12'
(prettier/prettier)
[error] 38-38: Unexpected usage of doublequote.
(jsx-quotes)
[error] 40-40: Replace "flex·items-center·gap-4" with 'flex·items-center·gap-4'
(prettier/prettier)
[error] 40-40: Unexpected usage of doublequote.
(jsx-quotes)
[error] 41-41: Replace "flex-shrink-0·rounded-full·border-2·border-white" with 'flex-shrink-0·rounded-full·border-2·border-white'
(prettier/prettier)
[error] 41-41: Unexpected usage of doublequote.
(jsx-quotes)
[error] 42-47: Replace ⏎··············className="w-12·h-12·rounded-full"⏎··············src={authorAvatar}⏎··············alt={authorName}⏎··············data-testid="Testimonial-img"⏎··········· with ·className='w-12·h-12·rounded-full'·src={authorAvatar}·alt={authorName}·data-testid='Testimonial-img'
(prettier/prettier)
[error] 43-43: Unexpected usage of doublequote.
(jsx-quotes)
[error] 46-46: Unexpected usage of doublequote.
(jsx-quotes)
[error] 50-52: Replace "text-base·font-bold·leading-6·text-gray-900">⏎··············{authorName}⏎············ with 'text-base·font-bold·leading-6·text-gray-900'>{authorName}
(prettier/prettier)
[error] 50-50: Unexpected usage of doublequote.
(jsx-quotes)
[error] 53-55: Replace "text-sm·font-medium·leading-5·text-primary-500">⏎··············{authorDescription}⏎············ with 'text-sm·font-medium·leading-5·text-primary-500'>{authorDescription}
(prettier/prettier)
[error] 53-53: Unexpected usage of doublequote.
(jsx-quotes)
🔇 Additional comments (1)
components/Testimonial.tsx (1)
15-22: Documentation updates look good!
The revised description is more accurate and clear in communicating the improved layout and spacing.
| */ | ||
| export default function Testimonial({ | ||
| className = '', | ||
| text, | ||
| authorName, | ||
| authorDescription, | ||
| authorAvatar | ||
| authorAvatar, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove the trailing comma to comply with style guidelines.
The trailing comma after “authorAvatar” may cause linting errors.
export default function Testimonial({
className = '',
text,
authorName,
authorDescription,
- authorAvatar,
+ authorAvatar
}: TestimonialProps) {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| authorAvatar, | |
| authorAvatar |
🧰 Tools
🪛 eslint
[error] 29-29: Delete ,
(prettier/prettier)
[error] 29-29: Unexpected trailing comma.
(comma-dangle)
Description
Testimonialcomponent's alignment for consistent spacing and layout.Related issue(s)
Closes #3509
Summary by CodeRabbit
Documentation
New Features
Bug Fixes