the link is not working <Link href={/blog/detail?id=${blog._id}}.
{ data && data.map((blog) => (
<div className="col-12 col-lg-3 mb-6 mb-lg-0" key={blog._id}>
{/* Blog Card */}
<div className="card border-0 bg-transparent">
{/* <div className="position-absolute bg-white shadow-primary text-center p-2 rounded ml-3 mt-3">15
<br/>July
</div> */}
{/*<img className="card-img-top shadow rounded" src={`${blog.productImages[0]}`} alt="Image"/>*/}
<Link href={`/blog/detail?id=${blog._id}`}><img className="card-img-top shadow rounded_img" style={{height: "170px", width: "253px"}} src={BASE_URL+blog.productImages[0]} alt="Img"/></Link>
In HTML Links use the <a> element not link, try replacing your last line with:
<a href={`/blog/detail?id=${blog._id}`}><img className="card-img-top shadow rounded_img" style={{height: "170px", width: "253px"}} src={BASE_URL+blog.productImages[0]} alt="Img"/></a>
See here:
https://www.w3schools.com/tags/tag_a.asp
Also, try replacing className with class throughout your code.
Related
I am trying to create a custom table as per the design and I am using Tailwind CSS for styling. I initially used table tags in HTML, but I was unable to style it properly, so I switched to using divs. However, I am facing an issue with the width size of the table head and row. The width is not consistent due to the content of the cells, can anyone please help me in resolving this issue?
Design:
What I get using div instead of table tags:
code:
<div className="flex flex-col">
<div className='flex text-sm font-bold text-gray-500'>
<div className='w-[170px] mr-2'>ລູກຄ້າ</div>
<div className='w-[140px] mr-2'>ປະກັນໄພ</div>
<div className='w-[120px] mr-2'>ບໍລິສັດ</div>
<div className='w-[90px]'>ວັນທີເລີ່ມຕົ້ນ</div>
<div className='w-[90px]'>ວັນທີສິ້ນສຸດ</div>
<div className='w-[90px]'>ສະຖານະ</div>
<div className='flex-1'>ຄ່າທຳນຽມ</div>
<div className='w-[170px]'></div>
</div>
</div>
<hr />
<div className='max-h-[700px] overflow-y-scroll shadow-sm insuranceReport rounded-b bg-white'>
{
orders?.map((order, index)=>(
<div key={index} className={`flex items-center px-5 ${index%2 == 0 ? 'bg-[#F5FCF5]' : 'bg-[#FFFFFF]'} py-4 text-sm hover:opacity-80`}>
<div className='w-[170px] flex items-center mr-2 font-sans text-sm'>
<div className="w-[2.3rem] h-[2.3rem] mr-2 rounded-full overflow-hidden aspect-square">
<img
src={
GetImageUrl(order?.profile, true)
}
alt={order?.name}
className="object-cover w-full h-full"
onError={({ currentTarget }) => {
currentTarget.onerror = null; // prevents looping
currentTarget.src= IMAGE_NOT_FOUND;
}}
/>
</div>
<div className='flex flex-col'>
<Link className='cursor-pointer hover:underline' to={`/sale/${order?.uuid}`}>
<span>{order?.customer?.name}</span>
</Link>
<span className='text-sm opacity-80'>{order?.customer?.gender}</span>
</div>
</div>
<div className='w-[140px] mr-2 text-sm'>{order?.product}</div>
<div className='w-[120px] mr-2 text-sm'>{order?.company}</div>
<div className='w-[90px] text-sm'>{FormatDate(order?.dateStart)}</div>
<div className='w-[90px] text-sm'>{FormatDate(order?.dateEnd)}</div>
<div className='w-[90px] text-sm'><span className={SaleStatusChecker(order?.status)?.color}>{SaleStatusChecker(order?.status)?.status}</span></div>
<div className='flex-1 text-sm'>₭ {order?.totalPrice?.toLocaleString()}</div>
<div className='flex items-start gap-3 text-sm'>
<button className='px-3 py-1 border-2 rounded-lg outline-none active:opacity-50 text-primary' onClick={()=>navigate(`/sale/${order?.uuid}`)}><FontAwesomeIcon icon={faEye}/> ລາຍລະອຽດ</button>
<button className='px-3 py-1 border-2 rounded-lg outline-none active:opacity-50 text-primary' onClick={()=>handleOpenOrderUpdateModal(order?.uuid)}><FontAwesomeIcon icon={faPenToSquare}/> ແກ້ໄຂ</button>
</div>
</div>
))
}
{
(orders?.length == 0 || orders == undefined || orders == []) && !isFetching ? <Empty/> : ""
}
{
isFetching &&
<LoadingData/>
}
</div>
</div>
I don't want to use flex and set a static width size of the div element. Is there any alternative solution to this issue?
Thank you in advance for your help!
Sorry this may be badly described but will try to describe this as best as I can:
What I'm trying to do is put so the Redux dropdown menu dropdown element is an element in the menu (next to about/Signout as shown in the below screenshot).
For some reason the dropdown element is not coming up at all in the menu, but does work in the index file.
The code for the menu is below,
Dropdown.js
import * as DropdownMenu from '#radix-ui/react-dropdown-menu';
export default function dropdownUserProfileMenu (){
return (
<>
<DropdownMenu.Root>
<DropdownMenu.Trigger className='trigger'>Settings</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Item>New Item</DropdownMenu.Item>
<DropdownMenu.Item>New Item 2</DropdownMenu.Item>
<DropdownMenu.Item>New Item 3</DropdownMenu.Item>
<DropdownMenu.Item>New Item 4</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</>
)
};
Menu.js
<div className='w-screen mr-3 h-16 drop-shadow-md rounded-sm bg-white'>
<div className='container px-4 md:px-0 h-full mx-auto flex justify-between items-center shadow-md'>
<div className='text-primaryBlack'>
<Link href='/'><p className='pl-4'>Student sharing site</p></Link>
</div>
<div>
<ul id='menuElements' className={`right-0 px-10 py-16 text-primaryBlack z-50 flex mx-auto flex-row space-x-4 items-center`}>
<Link href='/about'><li>About</li></Link>
<li><dropdownUserProfileMenu></dropdownUserProfileMenu></li>
<Link href='/api/auth/signout'><li onClick={e => {
e.preventDefault()
signOut()
}}>Signout</li>
</Link>
</ul>
</div>
</div>
</div>
// </div>
(Ignore the signin/signout methods, am using NextAuth specifically but this is not needed to get this working)
Hope helping for this is possible!
What I have right now:
<div className="navbar">
<div className="navbar-content px-5">
<span>
<ArrowCircleLeftIcon
className="h-6 w-6 cursor-pointer dark:stroke-white"
onClick={() => setIsInfoModalOpen(true)}
/>
<InformationCircleIcon
className="h-6 w-6 mr-2 cursor-pointer dark:stroke-white"
onClick={() => setIsInfoModalOpen(true)}
/>
</span>
<p className="text-xl ml-2.5 font-bold dark:text-white">{GAME_TITLE}</p>
<div className="right-icons">
<ChartBarIcon
className="h-6 w-6 mr-3 cursor-pointer dark:stroke-white"
onClick={() => setIsStatsModalOpen(true)}
/>
<CogIcon
className="h-6 w-6 cursor-pointer dark:stroke-white"
onClick={() => setIsSettingsModalOpen(true)}
/>
</div>
</div>
<hr></hr>
</div>
What this shows:
I want the 2 icons on the left hand side to be next to each other instead of ontop of each other.
How should I go about doing this?
Create a class with a display:inline; and add it to the icons, once you preview you can play with adding padding/margin left or right if you need to adjust somethings, even line height; but display:inline; is what tells elements to not be side by side or on top of one another but next to each other. Make sure you test mobile view vs. larger displays as well.
Just had to add:
.left-icons {
display: flex;
}
Hello I am trying to change the background of my page using the following code in a file called
Survey.module.css:
html {
background-image: linear-gradient( 94.3deg, rgba(26,33,64,1) 10.9%, rgba(81,84,115,1) 87.1% );
}
I've imported the CSS into my react component using the following import statement: import style from './Survey.js'
The code in Survey.js is below
import React from 'react'
import { Container, Col, Row } from 'react-bootstrap'
import style from './Survey.module.css'
function Survey() {
return (
<html>
<div>
<h1 className="display-5 text-center mt-5 text-white">Tell us about yourself</h1>
<div className={`${style.container} d-flex justify-content-center align-items-center`}>
<div className='row justify-content-md-center'>
<div className='col col-lg-5 shadow p-3 mb-5 bg-white rounded'>
<img src='https://static.toiimg.com/photo/msid-77430626/77430626.jpg?228049' className='rounded img-fluid'></img>
</div>
<div className='col col-lg-5 shadow p-3 mb-5 bg-white rounded'>
<h1></h1>
</div>
</div>
</div>
</div>
</html>
)
}
export default Survey
My issue is that when I change the background in CSS with the above code, the background of other pages in my project also change. All those pages import their CSS files using ***.module.css
I tried to use CSS modules to avoid this problem but I am still encountering it. Any advice?
Give your html class so your css doesn't affect to other page.
html.survey {
background-image: linear-gradient( 94.3deg, rgba(26,33,64,1) 10.9%, rgba(81,84,115,1) 87.1% );
}
import React from 'react'
import { Container, Col, Row } from 'react-bootstrap'
import style from './Survey.module.css'
function Survey() {
return (
<html className="survey">
<div>
<h1 className="display-5 text-center mt-5 text-white">Tell us about yourself</h1>
<div className={`${style.container} d-flex justify-content-center align-items-center`}>
<div className='row justify-content-md-center'>
<div className='col col-lg-5 shadow p-3 mb-5 bg-white rounded'>
<img src='https://static.toiimg.com/photo/msid-77430626/77430626.jpg?228049' className='rounded img-fluid'></img>
</div>
<div className='col col-lg-5 shadow p-3 mb-5 bg-white rounded'>
<h1></h1>
</div>
</div>
</div>
</div>
</html>
)
}
export default Survey
How about creating a div with a your preferred className that wraps the rest of the content and you can add your css styling like background-image to it. I don't get logic behind setting a background-image on the entire html document.
<div className={styles.surveyContainer}>
<div className={styles.content}>
...rest of the content
</div>
</div>
On my react project i want align my components to vertical. But when i use div and make it flex , my component width is changing and looking bad. what should i do ? I using tailwindcss but if you dont know it you can tell normal css too. I can use normal css too. My component :
<div className="">
<div className="mt-6 ml-5 bg-gray-50 border rounded-lg border-gray-200 shadow-md w-3/12 h-full mb-10">
<div className="flex mt-2">
<div className="border border-gray-500 ml-2 mt-2 pl-1 pr-1 pt-2 ">
<FontAwesomeIcon icon={faEtsy} className="text-2xl text-red-600" />
</div>
<div className="relative">
<span className="ml-3 pt-2 relative text-xl font-medium">
{prop.PharmacyName}
</span>
<br />
<span className="ml-4 text-blue-800">{prop.PharmacyNumber}</span>
</div>
</div>
<Divider />
<div className="">
<p className="px-2 py-1 font-medium text-base text-gray-700">
{prop.PharmacyAdress}
</p>
</div>
</div>
</div>
How i calling my component :
data.map((x, index) => {
return (
<div className="flex align-center">
<PharmacyCard className="relative" key={index} props={x} />
</div> )})
How its looks like : https://prnt.sc/1covi9m
How i want : https://prnt.sc/1cow1sq
I using that component like 30-40 times with mapping. So i want to see like 3 component in a row. Thanks for all replies!
So i want to see like 3 component in a row.
Since you have clear idea about the layout, I suggest to wrap you components in another div with grid and three columns; something like this:
<div className="grid grid-cols-3">
{data.map((x, index)=>{<PharmacyCard className="relative" key={index} props={x} />})}
</div>
Depending on your design, you may add gap class as well.
Also consider removing w-3/12 class from components so they fill grid's width.
You just need to put the .flex in upper level like the below:
<div className='flex align-center'>
{data.map((x, index)=>{<PharmacyCard className="relative" key={index} props={x} />})}</div>
hope this link will assist you to get the flexbox better
https://codepen.io/enxaneta/full/adLPwv