Skip to content
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

fix: center filter alignment on large screens #3629

Closed
wants to merge 2 commits into from
Closed

fix: center filter alignment on large screens #3629

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a30486
fix: center filter alignment on large screens
KishanInnovates Jan 30, 2025
4c517a4
Merge branch 'master' into fix/filter-alignment-lg
asyncapi-bot Jan 30, 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
82 changes: 50 additions & 32 deletions pages/blog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,26 +32,26 @@ export default function BlogIndexPage() {

return i2Date.getTime() - i1Date.getTime();
})
: []
: [],
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Fix code style issues flagged by ESLint.

  1. Remove trailing commas as they're disallowed by the project's ESLint configuration:
- navItems ? navItems.sort(...) : [],
+ navItems ? navItems.sort(...) : []

Similar fixes needed for other trailing commas.

  1. Use single quotes consistently in JSX attributes:
- <GenericLayout title="Blog" description={description} image={image} wide>
+ <GenericLayout title='Blog' description={description} image={image} wide>

Similar fixes needed for other JSX attributes.

Also applies to: 42-42, 46-46, 49-49, 50-50, 54-54, 67-150

🧰 Tools
🪛 ESLint

[error] 35-35: Delete ,

(prettier/prettier)

[error] 35-35: Unexpected trailing comma.

(comma-dangle)

);
const [isClient, setIsClient] = useState(false);

const onFilter = (data: IBlogPost[]) => setPosts(data);
const toFilter = [
{
name: 'type'
name: 'type',
},
{
name: 'authors',
unique: 'name'
unique: 'name',
},
{
name: 'tags'
}
name: 'tags',
},
];
const clearFilters = () => {
router.push(`${router.pathname}`, undefined, {
shallow: true
shallow: true,
});
};
const showClearFilters = Object.keys(router.query).length > 0;
Expand All @@ -64,72 +64,90 @@ export default function BlogIndexPage() {
}, []);

return (
<GenericLayout title='Blog' description={description} image={image} wide>
<div className='relative px-4 pb-20 pt-8 sm:px-6 lg:px-8 lg:pb-28 lg:pt-12' id='main-content'>
<div className='absolute inset-0'>
<div className='h-1/3 bg-white sm:h-2/3'></div>
<GenericLayout title="Blog" description={description} image={image} wide>
<div
className="relative px-4 pb-20 pt-8 sm:px-6 lg:px-8 lg:pb-28 lg:pt-12"
id="main-content"
>
<div className="absolute inset-0">
<div className="h-1/3 bg-white sm:h-2/3"></div>
</div>
<div className='relative mx-auto max-w-7xl'>
<div className='text-center'>
<div className="relative mx-auto max-w-7xl">
<div className="text-center">
<Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}>
Welcome to our blog!
</Heading>
<Paragraph className='mx-auto mt-3 max-w-2xl sm:mt-4'>
<Paragraph className="mx-auto mt-3 max-w-2xl sm:mt-4">
Find the latest and greatest stories from our community
</Paragraph>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='mx-auto mt-4 max-w-2xl'>
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="mx-auto mt-4 max-w-2xl"
>
Want to publish a blog post? We love community stories.{' '}
<TextLink href='https://github.com/asyncapi/website/issues/new?template=blog.md' target='_blank'>
<TextLink
href="https://github.com/asyncapi/website/issues/new?template=blog.md"
target="_blank"
>
Submit yours!
</TextLink>
</Paragraph>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='mx-auto mt-1 max-w-2xl'>
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="mx-auto mt-1 max-w-2xl"
>
We have an
<img
className='ml-1 text-primary-500 hover:text-primary-300'
className="ml-1 text-primary-500 hover:text-primary-300"
style={{ display: 'inline' }}
src='/img/logos/rss.svg'
alt='RSS feed'
height='18px'
width='18px'
src="/img/logos/rss.svg"
alt="RSS feed"
height="18px"
width="18px"
/>
<TextLink href='/rss.xml'> RSS Feed</TextLink>, too!
<TextLink href="/rss.xml"> RSS Feed</TextLink>, too!
</Paragraph>
</div>
<div className='mx:64 mt-12 md:flex md:justify-center lg:justify-start'>
<div className="mx:64 mt-12 md:flex md:justify-center lg:justify-center">
<Filter
data={navItems || []}
onFilter={onFilter}
className='md: mx-px mt-1 w-full md:mt-0 md:w-1/5 md:text-sm'
className="md: mx-px mt-1 w-full md:mt-0 md:w-1/5 md:text-sm"
checks={toFilter}
/>
{showClearFilters && (
<button
type='button'
className='bg-none text-md mt-1 rounded-md border border-gray-200 px-4 py-2 font-semibold tracking-heading text-gray-800 shadow-none transition-all duration-500 ease-in-out hover:text-gray-700 md:mt-0 md:py-0'
type="button"
className="bg-none text-md mt-1 rounded-md border border-gray-200 px-4 py-2 font-semibold tracking-heading text-gray-800 shadow-none transition-all duration-500 ease-in-out hover:text-gray-700 md:mt-0 md:py-0"
onClick={clearFilters}
>
<span className='inline-block'>Clear filters</span>
<span className="inline-block">Clear filters</span>
</button>
)}
</div>
<div>
{Object.keys(posts).length === 0 && (
<div className='mt-16 flex flex-col items-center justify-center'>
<div className="mt-16 flex flex-col items-center justify-center">
<Empty />
<p className='mx-auto mt-3 max-w-2xl text-xl leading-7 text-gray-500'>No post matches your filter</p>
<p className="mx-auto mt-3 max-w-2xl text-xl leading-7 text-gray-500">
No post matches your filter
</p>
</div>
)}
{Object.keys(posts).length > 0 && isClient && (
<ul className='mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3'>
<ul className="mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
{posts.map((post, index) => (
<BlogPostItem key={index} post={post} />
))}
</ul>
)}
{Object.keys(posts).length > 0 && !isClient && (
<div className='h-screen w-full'>
<Loader loaderText='Loading Blogs' className='mx-auto my-60' pulsating />
<div className="h-screen w-full">
<Loader
loaderText="Loading Blogs"
className="mx-auto my-60"
pulsating
/>
</div>
)}
</div>
Expand Down
Loading