added-blog-card-layout-responsive-added-color-theme-added-sample-markdown #14
Conversation
❌ Deploy Preview for webclubnitk failed.
|
| import React, { useEffect, useState } from 'react'; | ||
|
|
||
| const page = () => { | ||
| const [modal,setModal]=useState(false) |
There was a problem hiding this comment.
Have separate page for each blog, rather than a modal which opens here itself. That way we can share individual blog links, and is also more readable.
| <Markdown | ||
| children={blog.body} | ||
| className='mt-5 px-4' | ||
| remarkPlugins={[remarkMath, remarkGfm]} |
There was a problem hiding this comment.
Try out some better plugins, atleast for code & code-block.
- https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
- https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
Something like this.This looks cleaner
| const adjustCardWidth=()=>{ | ||
| const windowWidth=window.innerWidth | ||
| if(windowWidth>=768) | ||
| { | ||
| setCardWidth(windowWidth*0.42) | ||
| } | ||
| else if(windowWidth>=500) | ||
| { | ||
| setCardWidth(windowWidth*0.8) | ||
| } | ||
| else{ | ||
| setCardWidth(windowWidth*0.7) | ||
| } | ||
| } | ||
| useEffect(()=>{ | ||
| adjustCardWidth() | ||
| window.addEventListener('resize', adjustCardWidth); | ||
| return () => { | ||
| window.removeEventListener('resize', adjustCardWidth); | ||
| }; | ||
|
|
||
| },[]) |
There was a problem hiding this comment.
setting width/height like this has its own set of problems like padding/margin not adjusting properly.
I would suggest to do it the standard way:
<div className="h-[...px] md:h-[...px] sm:h-[...px] w-[...px] md:w-[...px] sm:w-[...px] ....... ">Good use of Flexbox & Grid and defining dimension in the above 3 screens should do the job
| <div className='grid grid-cols-1 gap-2 px-2 py-2 sm:grid-cols-2 sm:w-full justify-center items-center'> | ||
| <div> | ||
| <input type='search' | ||
| placeholder='Search 🔍' |
There was a problem hiding this comment.
Don't use emojis. If required use icons from https://react-icons.github.io/react-icons/ OR https://tabler.io/docs/icons/react
WebClub Landing Page
No description provided.