Alignment with Tailwind and React - reactjs

I'm trying to get two different visualizations to properly sit next to each other.
This is the current styling...
<div className="flex flex-col md:flex-row" >
<div className="w-full md:w-2/3">
<div className="text-center mt-4 flex justify-center items-center">
<h1 className="text-blue-500 text-lg font-semibold mr-5">
{format(new Date(selectedDate), 'do, MMMM - yyyy')}{' '}
</h1>
{isLoading && <Loader />}
</div>
<div>
<div className = "grid-cols-2 grid-flow-col" >
<div className = "grid-cols-1">
<h3 className="capitalize">Moodmap Daily Index</h3>
<Overview data={lineGraphData} timing={settingsData} />
</div>
<div>
<Expressions data={expressionsData} />
</div>
</div>
</div>
<div style={{ height: 100, width: 1000 }}>
<SubstanceDetails
fetchSubstances={fetchSubstances}
loading={loading}
data={data}
/>
</div>
</div>
</div>
For some reason when it renders, although I've made a bunch of changes, it comes out like this,
I want them to sit horizontally, with the bottom graph on the right hand side, ideally with the line graph a lot larger, taking up say 2/3. Unsure why this bug keeps happening.

You need to create a grid container by including the grid className in the element where you specify your grid columns:
<div className = "grid-cols-2 grid-flow-col" >
should become:
<div className = "grid grid-cols-2 grid-flow-col" >
https://tailwindcss.com/docs/display#grid
Note, to debug this you could have used the inspector to see that there was no grid container in your output.

Related

How to convert <img> element to Nextjs <Image> component

I've been writing Nextjs for a while but some of the image components are still in <img> tag like this. (based on TailwindCSS)
<div className="relative">
<div className="absolute inset-0 flex flex-col" aria-hidden="true">
<div className="flex-1 bg-transparent" />
<div className="w-full flex-1 bg-black" />
</div>
<div className="mx-auto max-w-7xl px-4 sm:px-6">
<img
className="relative rounded-lg"
src="/images/somephoto.png"
alt="screenshot"
/>
</div>
</div>
The current code shows the image in the center of the page with a relative position.
I've tried to convert the tag into the Next <Image /> component though it is hard to keep the styling since we need to specify width and height.
I would like to know the conversion tips between <img> and Next <Image> if any. (Appreciate it if you have an idea for the above case example)
As your current code is working correctly without adding any additional staying to the img tag, you can just replace it with the <Image /> component from next.js
<div className="relative">
<div className="absolute inset-0 flex flex-col" aria-hidden="true">
<div className="flex-1 bg-transparent" />
<div className="w-full flex-1 bg-black" />
</div>
<div className="mx-auto max-w-7xl px-4 sm:px-6">
<Image
loader={myLoader}
src="me.png"
alt="Picture of the author"
layout='fill'
/>
</div>
</div>;

How to make an animation in React?

I'm trying to figure out how to add an animation on the next elements. I was trying some stuff but didn't figure it out due the fact that I recently started to learn React.
<div className="gradient2">
<div className="grid grid-rows-3 stoljpi-metci grid-flow-col">
<div className="font-bold text-white pl-1.5 bojaTexta"> {metciTren}</div>
<div className="font-bold text-gray-400 -mt-1"> {clipMetci}</div>
</div>
<>
--Anim should go here, I want the className='slikea' to be animated, like slideIn
<div className='slikea'>
<img className="stoljpi mt-1" src={`${process.env.PUBLIC_URL}/images/${state}.png`} />
</div>
</>
</div>

How to do a 2 row text-element with same width but different font-size

I'm currently using tailwind css as a beginner.
What i am trying to do is to have a 2 element on top of each other with the same width but different pixel size.
What i have now is.
If you can't get what i'm trying to do, you can check the attached file.
<div className="w-full h-screen">
<div className="max-w-[1500px] px-4 mx-auto h-full">
<div className="flex h-[700px] ">
<div className="w-[1000px] flex flex-col justify-start">
<div className="">
<h1 className="w-full font-bold inline border-y-2 ">
The moon is made
</h1>
</div>
<p className="text-[100px] font-bold ">
of
<span className="primary-bg text-[100px] font-bold inline">
Pancakes.
</span>
</p>
</div>
<div className="w-[500px]">qwe</div>
</div>
</div>
</div>
And i wanted to achieve is this.
You can do that by choosing the right font-size for every text because the width is depending on the font size
I tried to copy the image you provided and made it as simple as I can
check it here : https://play.tailwindcss.com/H4pBcGRvag

Change inner div on hover in react grid tailwind

So, for CSS I am using tailwindcss.
I have implemented integer based approach but when I hover quickly over the divs, the state remains un updated. If the value is 0, the first div is shown else the second div is shown.
Below is the code :
<div className="text-white m-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 grid-flow-row gap-8">
{
data.map((d,idx)=>(
<div onMouseEnter={()=>{toggleState(idx,1)}} onMouseLeave={()=>{toggleState(idx,0)}} key={'event'+idx} className="relative h-96 overflow-hidden" style={{background: "-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1))), url('https://images.unsplash.com/photo-1475855581690-80accde3ae2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80') no-repeat",backgroundSize:'cover'}}>
{!v[idx] && (
<div className="absolute w-full py-2.5 bottom-0 inset-x-0 text-white text-center leading-4">
<div className='divide-y-2 px-2 h-full'>
<h2 class="mt-2 mb-2 font-bold text-2xl">{d.title}</h2>
<p class="text-lg">{d.dueDate}</p>
</div>
</div>
)}
{v[idx] && (
<div className="absolute w-full py-2.5 text-white text-center leading-4">
<div className='px-2 w-full'>
<h2 class="mt-2 mb-2 font-bold text-2xl">{d.title}</h2>
<p class="text-lg">{d.desc}</p>
<span className='bottom-0 right-0'>Go to Course =</span>
{/* <a href="#" className='align-bottom'>Go to the Course</a> */}
</div>
</div>
)}
</div>
))
}
</div>
The function for toggle state
const [v,setV] = useState([0,0,0,0,0,0,0]);
const toggleState = (idx,value)=>{
const newV = [...v];
newV[idx]=value;
setV(newV);
}
What is the best way to implement such utility?
It is hard to give you the best help given the out of context snippet of code you gave. But to improve the UX and the performance of your interaction you could avoid to handle all that in the list.
You could start isolating the components of the list and handle the mouse in/out in the single component.
Something like this:
<div>
{data.map((d,idx)=> <YourComponent d={d} />}
</div>
YourComponent:
function YourComponent(props) {
return (
<div onMouseEnter={...} onMouseLeave={...} >
...
</div>
)}
This way every single component would handle itself and the list will not re-render on every mouse move.

Bootstrap 4 flex container to adjust to viewport size to create no wrap or overflow to next row?

App (React + Bootstrap 4) looks good on medium viewport or higher, but in small/mobile, there is an overflow of the search bar and sort and it drops to the next "row" which is under the sidebar:
What it looks like on mobile/small viewport
My code:
return (
<div className="container-fluid">
<div className="row">
<nav className="sidebar">
<NavBar />
</nav>
<main
role="main"
className="col-md-9 mx-sm-auto mt-4 d-flex flex-nowrap"
>
<div className="col-md-9 flex-shrink-1">
<SearchBar onSubmit={handleSearchSubmit(props.searchTerm)} />
</div>
<div className="flex-shrink-1">
<DropDown />
</div>
</main>
</div>
</div>
);
}
I was having the same problem yesterday with my navbar. I simply used media queries for width <= 320px which is small screen phones.

Resources