I Have this form with the transition
this is the problem:
https://youtu.be/cgtBNKRgJwQ
I want the magnifying glass to stay fixed, and the form to move
my code:
import Search from './Icons/SearchIcon';
export default function SearchForm() {
return (
<div className="flex">
<input
id="input"
className="transition-[width] duration-[1500ms] text-sm focus:pl-3 focus:outline-none focus:p-1 w-0 focus:w-full border-y border-l bg-white border-slate-200"
/>
<label className="border-y border-r p-1 border-slate-200" htmlFor="input">
<Search />
</label>
</div>
);
}
Looks like your animation does what you want.
Your component is almost ready, it's just missing ONE class to do what you want:
Add justify-end on your main div, it should do the trick.
Related
I built a module, then broke it up into components and trying to put it back together.
The components work. Some components go inside the div of another component.
I have tried putting them into a div scaffold, but i was then writing more css to bring the module together.
I thought we just do this:
<CompOne>
<CompTwo />
</CompOne>
This gives an error:
Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.
So maybe the above is write i need to typescript? sorry couldnt find a working example on this.
function WaldoEye() {
return (
<WaldoEyeball>
<WaldoRetina/>
</WaldoEyeball>
)
}
export default WaldoEye
function WaldoEyeball() {
return (
<div className="
flex
relative
items-center
opacity-90
w-40 h-40
rounded-full
shadow-[inset_0_-15px_15px_-3px_rgba(5,10,255,0.3)]
bg-gradient-to-r
from-slate-50
via-slate-100
to-slate-50
">
<div className="
absolute
flex
items-center
opacity-90
w-40 h-40
rounded-full
shadow-[0_60px_55px_-25px_rgba(255,255,255,0.4)]
">
</div>
</div>
)
}
export default WaldoEyeball
function WaldoRetina() {
return (
<>
<div className="
flex
items-center
relative
mx-auto
w-16
h-16
rounded-full
border-2
border-sky-500
bg-gradient-radial
from-cyan-500
via-sky-300
to-sky-500
">
</div>
</>
)
}
export default WaldoRetina
So maybe the above is write i need to typescript? sorry couldnt find a working example on this.
Currently the WaldoEyeball component doesn't expect any children. You will need to adjust the props in the WaldoEyeball component so it accepts children.
const WaldoEyeball: FC = ({ children }) => {
return (
<div className="
flex
relative
items-center
opacity-90
w-40 h-40
rounded-full
shadow-[inset_0_-15px_15px_-3px_rgba(5,10,255,0.3)]
bg-gradient-to-r
from-slate-50
via-slate-100
to-slate-50
">
<div className="
absolute
flex
items-center
opacity-90
w-40 h-40
rounded-full
shadow-[0_60px_55px_-25px_rgba(255,255,255,0.4)]
">
{children} // drop children somewhere to render it
</div>
</div>
);
}
hey i have in my site a stick div to create a new post
i want this div to animated shrink to a little box the will stick to the header while user scrolls down
and when im pressing on it or scrolling up this div will be visable again
any one can help me how to do this
<form
onSubmit={(e) => {
handleSubmit(e);
}}
className={` top-[106px] z-10 bg-main px-3 pt-2 rounded-lg border border-gray-300`}
>
{titlePost()}
{isPostActive && (
<div className="flex flex-col py-2 ">
<CommunitySelect community={community} setCommunity={setCommunity} />
{textArea()}
{imageBoxOpen && (
<DropzoneComponent
setImages={setImages}
maxImagesLength={maxImageLength}
/>
)}
{createPostButton()}
</div>
)}
</form>```
I'm trying to add some JS to add a click event to an element within a livewire component. The click event works as expected on first load, however as soon as I run a wire:click, the JS click events no longer work?
I can see that livewire is removing / updating the dom elements when I click the wire:click element so unsure whether this may have something to do with it.
What am I doing wrong? How should I be registering click events to livewire elements in JS and ensure they always work?
My javascript:
document.addEventListener('livewire:load', function () {
let pb_responsive_button = [...document.querySelectorAll('.js-pb-responsive')];
pb_responsive_button.map(function (btn) {
btn.addEventListener("click", function () {
console.log('click');
});
});
});
livewire:
<button wire:click="addComponentActive(true)">
<span class="font-bold text-sm">Add Page Block</span>
</button>
public function addComponentActive(bool $bool)
{
$this->add_component_active = $bool;
}
my view:
#if ($add_component_active === true)
<section class="bg-white shadow-lg rounded-sm mb-8 w-full h-[calc(100%-64px)] absolute z-50">
.....
</section>
#endif
<section class="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
<div class="border border-gray-200 rounded">
<div class="bg-gray-200 p-5 flex justify-between">
<div class="bg-white border border-gray-200 rounded p-2">
<span class="font-bold text-sm">Homepage</span>
</div>
<div class="bg-blue-600 text-white border border-gray-200 rounded p-2">
<button wire:click="addComponentActive(true)">
<span class="font-bold text-sm">Add Page Block</span>
</button>
</div>
<div class="flex justify-between items-center gap-2">
<div class="js-pb-responsive js-pb-mobile bg-white border border-gray-200 rounded p-2">M</div>
<div class="js-pb-responsive js-pb-tablet bg-white border border-gray-200 rounded p-2">T</div>
<div class="js-pb-responsive js-pb-desktop bg-white border border-gray-200 rounded p-2">D</div>
</div>
</div>
</div>
</section>
UPDATE:
I've updated it to show and hide the blocks rather than display it in a conditional if statement which ensures the click events still work, since the element still exists on page.
<section class="{{$add_component_active === true ? 'block' : 'hidden'}}"> ... </section>
Surely there is a better way to handle this. I notice I have a livewire:load eventListener? Is there another event I should be listening to when the livewire view is reloaded to reinitise the JS events?
Any help would be much appreciated.
Livewire works hand-in-hand with Alpine.js. You should focus on Alpine if you want strictly front-end functionality https://alpinejs.dev/directives/on
<button #click="alert('Hello World!')">Say Hi</button>
I am using NextJS and Tailwind CSS. I already built the dropdown but I have an issue building the arrow pointing to the specific element. I built the arrow in a previous version using a div rotated at 45deg but then I couldn't make my dropdown take the full screen. Now I have it full screen and I'm wondering how to make the arrow (div) point to the specific element I'm hovering on. I made sure to hide some details about the website because of confidentiality matters. Here's what I'm trying to achieve:
Here's the code I have so far:
import React from 'react'
import { navLinks } from '../data/navdata'
const DropdownHover = ({ index }) => {
return (
<div className="group-hover:block absolute left-0 w-full hidden text-dark-gray mt-8 bg-pink" aria-labelledby="dropdownButton">
<div className="justify-center">
<div className="flex py-10 px-20 text-sm justify-between">
{navLinks[index].hover.map((link, index) => {
return (
<div className="" key={index}>
<p className="text-navbar-gray py-2 uppercase font-semibold">{link.name}</p>
{link.links.map((sublink, index) => {
return(<p className="" key={index}><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href={sublink.path}>{sublink.name}</a></p>)
})}
</div>
)
})}
</div>
<div className="flex text-sm px-20 py-10">
<div className='pr-40'>
<p className="text-navbar-gray py-2 uppercase font-semibold">Dummy Data</p>
<p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
<p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
<p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
</div>
<div>
<p className="text-navbar-gray py-2 uppercase font-semibold">Dummy Data</p>
<p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
<p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
<p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
</div>
</div>
</div>
</div>
)
}
export default DropdownHover
in CSS you can simply manipulate left property of the arrow if its positioned absolute:
li :nth-child(1):hover .arrow{
left:20rem;
}
li :nth-child(2):hover .arrow{
left:30rem;
}
but if you want to make it completely responsive, first get OffsetX of every li element then add an event listener on mouseclick.
for a better understanding you can check the following project on code pen.
https://codepen.io/piyushpd139/pen/gOYvZPG
I had created some cards from an array of objects, now I want to show popup data for each card differently.
here is my code of printing
{data.carData.map( single=>(<li>{ <div onClick={handleClick}><Card single={single}/></div>} </li>))}
for this, I want the card name onClick event, but when I pass anything in the handleClick react throw an error of too many re-renders.
if I do the same onClick event inside the card component and log it prints all the cards names one by one
here is what is inside the card:
function Card({single}) {
const [flowName, setflowName] = useState();
const handleClick=(e)=>{
setflowName(e);
return
}
console.log("loging name:",flowName);
return (
<div className="main mb-2 z-0" onClick={handleClick(e=>single?.flowName)} >
<div className=" inner_main_container pt-4 px-8 bg-white shadow-lg rounded-lg ">
<div className="flex justify-between">
<div className="flex flex-row align-center">
</div>
{single?.badge.map(badge=>(
<div className={"badge"} key={badge}>
<span className={badge==="Growth"?" badgeClrG":(badge==="Content"?"content":"badgeClrO")} key={badge}>{badge}</span>
</div>
) )}
</div>
<div className="flex justify-center">
<img src={single?.image} alt={single?.flowName} />
</div>
<div >
<div className={"mt-2 flex justify-center"}>
<h1>{single?.flowName}</h1>
</div>
</div>
</div>
</div>
) } export default Card
I suspect you're doing this when you're trying to pass a value:
single=>(<li>{ <div onClick={handleClick(value)}><Card single={single}/></div>} </li>))}
Every time this is rendered, the function is invoked straight away, which causes another render and so on...
The solution is to wrap your handleClick call in another function:
single=>(<li>{ <div onClick={()=>handleClick(value)}><Card single={single}/></div>} </li>))}