Skip to content

fix: #4065 Case Studies page table is now mobile responsive #4289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Priyank0703 wants to merge 2 commits into from
Closed

fix: #4065 Case Studies page table is now mobile responsive #4289

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8907975
fix: #4065 Case Studies page table is now mobile responsive
Priyank0703 Jul 29, 2025
52e4b38
fix: #4065 Case Studies page table is now mobile responsive
Priyank0703 Jul 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 84 additions & 52 deletions pages/casestudies/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,93 +27,125 @@ interface Adopter {
* @description Renders the Case Studies page.
*/
export default function Casestudies() {
const description: string = 'Learn about different case studies based on AsyncAPI spec and related tools.';
const description: string =
'Learn about different case studies based on AsyncAPI spec and related tools.';
const image: string = '/img/social/case-studies.webp';
const title: string = 'Case Studies';

return (
<GenericLayout title={title} description={description} image={image} wide>
<div
className='relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8'
data-testid='CaseStudy-main'
className="relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8"
data-testid="CaseStudy-main"
>
<div className='grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
<div className='col-span-5 col-start-3'>
<div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center">
<div className="col-span-5 col-start-3">
<Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}>
{title}
</Heading>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
The best way to learn how to use AsyncAPI is not only through documentation that usually is focused on
recommendations and best practices. It is also good to confront with real-life case studies that explain
how people really use AsyncAPI and what are their flows.
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="my-4 max-w-4xl"
Comment on lines +38 to +48
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

CI is red – fix Prettier/ESLint violations (quotes & prop formatting).

The project’s lint rules expect single quotes in JSX and to avoid unnecessary multi-line props. The newly-added lines use double quotes and break the pipeline (see GH-Actions log).
Run npm run lint -- --fix (or prettier --write) and commit the auto-formatted file.

Example of the required change:

-<div
-  className="relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8"
-  data-testid="CaseStudy-main"
->
+<div
+  className='relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8'
+  data-testid='CaseStudy-main'>
📝 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.

Suggested change
className="relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8"
data-testid="CaseStudy-main"
>
<div className='grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
<div className='col-span-5 col-start-3'>
<div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center">
<div className="col-span-5 col-start-3">
<Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}>
{title}
</Heading>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
The best way to learn how to use AsyncAPI is not only through documentation that usually is focused on
recommendations and best practices. It is also good to confront with real-life case studies that explain
how people really use AsyncAPI and what are their flows.
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="my-4 max-w-4xl"
<div
className='relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8'
data-testid='CaseStudy-main'>
<div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center">
<div className="col-span-5 col-start-3">
<Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}>
{title}
</Heading>
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="my-4 max-w-4xl"
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project

[error] 38-38: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.

[error] 39-39: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.

[error] 41-41: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.

[error] 42-42: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.

[error] 46-48: Prettier formatting error: Replace multiline JSX props with single line and use single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.

🤖 Prompt for AI Agents 
In pages/casestudies/index.tsx around lines 38 to 48, the code uses double
quotes in JSX attributes and breaks props into multiple lines, causing
Prettier/ESLint violations. To fix this, replace double quotes with single
quotes in JSX attributes and consolidate multi-line props into single lines
where possible. Run the project's lint auto-fix command (npm run lint -- --fix
or prettier --write) to automatically format the file and then commit the
changes.

>
The best way to learn how to use AsyncAPI is not only through
documentation that usually is focused on recommendations and best
practices. It is also good to confront with real-life case studies
that explain how people really use AsyncAPI and what are their
flows.
</Paragraph>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
Feel free to submit your case study. We have a template for you. For more details
<TextLink href='https://github.com/asyncapi/website/blob/master/README.md#case-studies' target='_blank'>
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="my-4 max-w-4xl"
>
Feel free to submit your case study. We have a template for you.
For more details
<TextLink
href="https://github.com/asyncapi/website/blob/master/README.md#case-studies"
target="_blank"
>
read our FAQ
</TextLink>
.
</Paragraph>
</div>
</div>
<div data-testid='CaseStudy-card'>
<div data-testid="CaseStudy-card">
<CaseStudyCard studies={CaseStudiesList as ICaseStudies} />
</div>

<div className='adopters'>
<div className='mt-8 grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
<div className='col-span-5 col-start-3'>
<div className="adopters">
<div className="mt-8 grid lg:grid-cols-9 lg:gap-8 lg:text-center">
<div className="col-span-5 col-start-3">
<Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}>
Adopters
</Heading>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
Check out how different companies use AsyncAPI and what problems they solve.
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="my-4 max-w-4xl"
>
Check out how different companies use AsyncAPI and what problems
they solve.
</Paragraph>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="my-4 max-w-4xl"
>
Feel free to{' '}
<a className='underline' href='https://github.com/asyncapi/website/blob/master/config/adopters.yml'>
<a
className="underline"
href="https://github.com/asyncapi/website/blob/master/config/adopters.yml"
>
submit a pull request
</a>{' '}
with information about how your company uses AsyncAPI. We know that writing an official case study might
be time consuming and requires too much internal paper work. Let&apos;s make sure we can at least
capture a use case that is already a great learning information for the community.
with information about how your company uses AsyncAPI. We know
that writing an official case study might be time consuming and
requires too much internal paper work. Let&apos;s make sure we
can at least capture a use case that is already a great learning
information for the community.
</Paragraph>
</div>
</div>
</div>

<center>
<div className='overflow-x-auto'>
<table className='my-8 w-full max-w-full border-collapse border'>
<thead>
<tr>
<th className='border p-2 font-bold'>Company name</th>
<th className='border-2 p-2 font-bold'>Use Case</th>
<th className='border-2 p-2 font-bold'>Resources</th>
</tr>
</thead>
<tbody>
{AdoptersList.map((entry: Adopter, index: number) => (
<tr key={index} data-testid='Adopters'>
<td className='border-2 p-2'>{entry.companyName}</td>
<td className='border-2 p-2'>{entry.useCase}</td>
<td className='border-2 p-2'>
<ul>
{entry.resources.map((resource: Resource, resourceIndex: number) => (
<li className='p-2' key={resourceIndex}>
<a className='text-cyan-500 underline' href={resource.link}>
<div className="w-full overflow-x-auto">
<table className="my-8 min-w-full border-collapse border text-sm sm:text-base">
<thead>
<tr>
<th className="border p-2 font-bold text-left">Company name</th>
<th className="border-2 p-2 font-bold text-left">Use Case</th>
<th className="border-2 p-2 font-bold text-left">Resources</th>
</tr>
</thead>
<tbody>
{AdoptersList.map((entry: Adopter, index: number) => (
<tr key={index} data-testid="Adopters">
<td className="border-2 p-2 align-top">
{entry.companyName}
</td>
<td className="border-2 p-2 align-top">{entry.useCase}</td>
<td className="border-2 p-2 align-top">
<ul className="list-disc list-inside space-y-1">
{entry.resources.map(
(resource: Resource, resourceIndex: number) => (
<li key={resourceIndex}>
<a
className="text-cyan-600 hover:underline break-all"
href={resource.link}
target="_blank"
rel="noopener noreferrer"
>
{resource.title}
</a>
</li>
))}
</ul>
</td>
</tr>
))}
</tbody>
</table>
</div>
</center>
),
)}
Comment on lines +128 to +141
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove dangling comma – linter error.

There is a trailing comma after the closing parenthesis of the map callback which Prettier flags (comma-dangle). Drop it:

-            ),
-          )}
+            )
+          )}
📝 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.

Suggested change
{entry.resources.map(
(resource: Resource, resourceIndex: number) => (
<li key={resourceIndex}>
<a
className="text-cyan-600 hover:underline break-all"
href={resource.link}
target="_blank"
rel="noopener noreferrer"
>
{resource.title}
</a>
</li>
))}
</ul>
</td>
</tr>
))}
</tbody>
</table>
</div>
</center>
),
)}
{entry.resources.map(
(resource: Resource, resourceIndex: number) => (
<li key={resourceIndex}>
<a
className="text-cyan-600 hover:underline break-all"
href={resource.link}
target="_blank"
rel="noopener noreferrer"
>
{resource.title}
</a>
</li>
)
)}
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project

[error] 128-131: Prettier formatting error: Delete extra spaces and newlines. (prettier/prettier)

[error] 132-134: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.

[error] 135-135: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.

[error] 136-139: Prettier formatting error: Delete extra spaces and newlines. (prettier/prettier)

[error] 140-140: Prettier formatting error: Unexpected trailing comma. (comma-dangle)

🤖 Prompt for AI Agents 
In pages/casestudies/index.tsx around lines 128 to 141, remove the trailing
comma after the closing parenthesis of the map callback function to fix the
Prettier linter error. Simply delete the comma following the closing parenthesis
of the map method.

</ul>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</GenericLayout>
);
Expand Down
Loading