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>
Related
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>;
So i have built a react component, and there's supposed to be a video background as a cover, but I just cant seem to make it work.
I just puts the video outside of the component. Can anyone help me with this please. Also I'm using Tailwind.
import React from "react";
export default function Example() {
return (
<div className="items-start flex flex-col p-2 h-96 w-fit ">
<div>
<video autoPlay loop muted>
<source src="Assets/img/video/test.mp4" type="video/mp4" />
</video>
<div className="items-center flex ml-2 mt-2">
<div className="flex-shrink-0 group block">
<div className="flex items-center">
<div>
<img
className="inline-block h-9 w-9 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-white">Sermad Alladin</p>
<p className="text-sm font-medium text-gray-50">
Elgiganten • 18 t.
</p>
</div>
</div>
</div>
</div>
<div className="items-end self-end flex mt-64">
<div className="flex">
<p className="font-normal h-12 leading-5 w-40 mr-2">
Amazing customer service, but i wish was better...😉
</p>
</div>
<div className="items-center flex h-7 justify-end mb-1 p-2 bg-primary rounded-tl-xl rounded-bl-xl">
<div className="font-bold mx-2 text-white">87</div>
</div>
</div>
</div>
</div>
);
}
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
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.
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.