I am creating a step and I am using a hook to paint but it gives me this problem that if I am in 3, all the others paint me for example 4, 5, etc and I do not want that
export default function Registration() {
const [current, setCurrent] = useState(3)
return (
<div className="flex">
<div className="flex flex-col justify-center">
<div className="w-1 h-16 flex justify-center font-bold items-center">
1
</div>
<div className="w-1 h-8 flex justify-center font-bold items-end">2</div>
<div className="w-1 h-16 flex justify-center font-bold items-end">
3
</div>
<div className="w-1 h-16 flex justify-center font-bold items-end">
4
</div>
<div className="w-1 h-16 flex justify-center font-bold items-end">
5
</div>
</div>
<div className="w-10">
{current === 1 ? (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
<div className="w-1 h-10 bg-cyan"></div>
</div>
) : (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1">
<BiCheck />
</div>
<div className="w-1 h-10 bg-cyan"></div>
</div>
)}
{current === 2 ? (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 cirlce rounded-full absolute z-1" />
<div className="w-1 h-16 cirlce"></div>
</div>
) : (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan cirlce rounded-full absolute z-1">
<BiCheck />
</div>
<div className="w-1 h-16 bg-cyan" />
</div>
)}
{current === 3 ? (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 cirlce rounded-full absolute z-1" />
<div className="w-1 h-16 cirlce"></div>
</div>
) : (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1">
<BiCheck />
</div>
<div className="w-1 h-16 bg-cyan" />
</div>
)}
{current === 4 ? (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 cirlce rounded-full absolute z-1" />
<div className="w-1 h-16 cirlce"></div>
</div>
) : (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1">
<BiCheck />
</div>
<div className="w-1 h-16 bg-cyan" />
</div>
)}
{current === 5 ? (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 cirlce rounded-full absolute z-1" />
<div className="w-1 h-16 bg-dark-15"></div>
</div>
) : (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1">
<BiCheck />
</div>
<div className="w-1 h-16 bg-cyan" />
</div>
)}
</div>
</div>
)
}
the problem is that when I change for example the useState(3) it shows me like this:
when they should be 3, 4, and 5 they should be gray
and I wanted to ask how I can change through a button?
In your current sample you only check if it is equal.
To check if it is equal or more you need to change current === 1 to current >= 1
To change the current value you need to use the setter` you set for the state like this
<button onClick={() => setCurrent(4)}>Set to 4</button>
(This is a very static way to do it but just to demonstrate how it is done)
To make it a bit more dynamic you can add a function to do it
const changeCurrnet = (dir) => {
const tempCurrent = dir === "up" ? current + 1 : current - 1
setCurrent(tempCurrent )
}
<button onClick={() => changeCurrnet("up")}>Increase</button>
<button onClick={() => changeCurrnet("down")}>Decrease</button>
First of all, you can not figure out the problem because you are doing too many redundant elements in conditional rendering. For example, the first element :
{current === 1 ? (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
<div className="w-1 h-10 bg-cyan"></div>
</div>
) : (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1">
<BiCheck />
</div>
<div className="w-1 h-10 bg-cyan"></div>
</div>
)}
You are using the same 3 divs inside both of the states, you can reduce it to:
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
{(current != 1) && (<BiCheck />)}
<div className="w-1 h-10 bg-cyan"></div>
</div>
After this, debugging can be much easier. So, let's focus on the main problem, you need the current, and below circles to light. You are checking only for the equality, which makes the circle light if and only if the state equals its index. If you want to make it the index and all greater indices, then you need to check for >= not ===.
Your final code may look like:
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
{(current >= 1) && (<BiCheck />)}
<div className="w-1 h-10 bg-cyan"></div>
</div>
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
{(current >= 2) && (<BiCheck />)}
<div className="w-1 h-10 bg-cyan"></div>
</div>
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
{(current >= 3) && (<BiCheck />)}
<div className="w-1 h-10 bg-cyan"></div>
</div>
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
{(current >= 4) && (<BiCheck />)}
<div className="w-1 h-10 bg-cyan"></div>
</div>
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
{(current >= 5) && (<BiCheck />)}
<div className="w-1 h-10 bg-cyan"></div>
</div>
To change using a button, you can then create an event listener on the button to change the state, and react will render the elements again depending on the newly changed state.
Related
return (
<div className="w-full">
{project.map((proj: projTypes, index: any) => {
return (
<div
key={index.toString()}
className="border-b border-b-slate-100 bg-white bg-no-repeat overflow-hidden"
>
<div className="flex flex-col lg:flex-row grow text-center lg:text-left py-10 text-green items-center justify-between h-full">
<div>
<button
onClick={() => router.push(`portfolio/${proj.slug.current}`)}
className="text-[25px] lg:text-[44px] font-bold font-display ease-in-out duration-300"
>
{proj.title}
</button>
</div>
<div className="flex w-1/3 gap-x-5 justify-center ease-in-out duration-900">
<p className="ease-in-out duration-700 text-[14px] uppercase text-gray font-bold">
{proj.category}
</p>
<p className="ease-in-out duration-700 text-[14px] uppercase text-gray font-bold">
{proj.year}
</p>
</div>
</div>
</div>
);
})}
</div>
expected clickable items on mobile
I'm trying to fill the width of a fixed element in Tailwind to full width.
here's a screenshot of the modal:
Modal Screenshot
please ignore the text inside it as I'm still testing stuff out.
my code React:
import { Dialog, Transition } from '#headlessui/react'
import { Fragment, useState } from 'react'
import { Link } from 'react-router-dom'
export default function Modal2() {
let [isOpen, setIsOpen] = useState(true)
function closeModal() {
setIsOpen(false)
}
function openModal() {
setIsOpen(true)
}
return (
<>
<div className=" absolute right-1 top-5 p-2">
<button
type="button"
onClick={openModal}
className="flex rounded-3xl pl-6 pr-6 bb p-2 "
>
Open dialog
</button>
</div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10 " onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed flex inset-0 bg-black bg-opacity-80 blur2 " />
</Transition.Child>
<div className="fixed top-20 right-2 overflow-y-auto ">
<div className="flex justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="mb-10 w-full max-w-md transform overflow-hidden rounded-3xl bg-white p-6 text-left align-top shadow-xl transition-all">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-900"
>
Lorem, ipsum dolor.
</Dialog.Title>
<div className="mt-2">
<p className=" flex flex-col text-md text-gray-500">
<Link to={"/about"} className="py-1 ">dada</Link>
<span className='h bg-red-600'></span>
<Link className="py-1 " to={""}>dada</Link>
<span className='h bg-red-600'></span>
<Link className="py-1 " to={""}>dada</Link>
<span className='h bg-red-600'></span>
<Link className="py-1 " to={""}>dada</Link>
</p>
</div>
<div className="mt-4">
<button
type="button"
className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
onClick={closeModal}
>
Got it, thanks!
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</>
)
}
this is the line that opens the Modal. I want to make the width stretch to full-screen width. :
<div className="fixed flex inset-0 bg-black bg-opacity-80 blur2 " />
I would appreciate any help.
I tried to use items-stretch and w-full. didn't work. I guess its because it's fixed.
I couldn't reproduce your problem exactly, so this might be off.
If I understand your goal correctly, you're targeting the wrong element. The Dialog component contains your modal, so that's the component which should
have display: flex and justify-content: center to centralize the modal horizontally.
So you should add the classes flex and justify-center to the Dialog component. You can also add items-center to centralize it vertically.
[...]
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10 flex justify-center" onClose={closeModal}>
[...]
I have this jsx here and I am using tailwindcss. with this code i have basically just made this:
this post info bar
<div className="flex items-center space-x-1 group">
<div className="icon group-hover:bg-[#1d9bf0] group-hover:bg-opacity-10 cursor-pointer">
<ChatBubbleOutline className="h-5 group-hover:text-[#1d9bf0]" />
</div>
</div>
{user?.tag === post?.tag ? (
<div
className="flex items-center space-x-1 group"
onClick={(e) => {
e.stopPropagation();
deleteDoc(doc(db, "posts", id));
router.push("/");
}}
>
<div className="icon group-hover:bg-red-600/10">
<TrashIcon className="h-5 group-hover:text-red-600" />
</div>
</div>
) : (
<div className="flex items-center space-x-1 group">
<div className="icon group-hover:bg-green-500/10">
<SwitchHorizontalIcon className="h-5 group-hover:text-green-500" />
</div>
</div>
)}
<div
className="flex items-center space-x-1 group"
onClick={(e) => {
likePost();
}}
>
<div className="icon group-hover:bg-pink-600/10">
{liked ? (
<HeartIconFilled className="h-5 text-pink-600" />
) : (
<HeartIcon className="h-5 group-hover:text-pink-600" />
)}
</div>
{post?.likes?.length > 0 && (
<span
className={`group-hover:text-pink-600 text-sm ${
liked &&
"text-pink-600"
}`}
>
{post?.likes.length}
</span>
)}
</div>
<div className="icon group">
<ShareIcon className="h-5 group-hover:text-[#1d9bf0]" />
</div>
</div>
Everything is working, and looks great, but for some reason, the first element in the flex div at the top is non clickable and there is no hover animation. The ChatBubbleOutline icon when hovered doesnt have any css showing and the onclick listener doesnt work, but every other icon after than does perfectly, why is this? And a strange thing is that when i go into md screen size or lower it works completly as i want it to but in xl screen size for a normal screen it doesnt work.
Here is the my css file
#layer components {
.hoverAnimation {
#apply hover:bg-[#d9d9d9] hover:bg-opacity-10 rounded-full cursor-pointer w-[52px] h-[52px] xl:w-auto xl:h-auto xl:py-3 xl:px-4 transition duration-200 ease-out;
}
.icon {
#apply cursor-pointer w-9 h-9 hover:bg-[#1d9bf0] hover:bg-opacity-10 flex items-center justify-center rounded-full transition ease-out;
}
}
How can make the calendar pop up? I am using tailwind CSS, it won't work. I tried to follow the documentation about the z-index.
This is my main homepage. And it's arranged completely.
const Homepage = () => {
return (
<div>
<Navbar />
<Header />
<UnderHeader />
<div className="mt-14 flex flex-col items-center gap-8">
<Featured />
</div>
</div>
)
}
This is UnderHeader.jsx where the content of search box, date etc.
return (
<div className="w-screen h-80 max-h-7xl drop-shadow-lg ">
<div
className="w-full h-full mt-5 bg-no-repeat bg-cover bg-center opacity-100 bg-neutral-800 bg-blend-overlay flex items-center justify-center "
style={{ backgroundImage: `url(${BackgroundIsland})` }}
>
<div className="flex items-center justify-evenly p-4 w-3/4 h-16 text-lg border-2 border-white/[.2] bg-white/[.08] rounded-full">
<div className="flex gap-3 items-center justify-center text-white">
<FaBed size={36} className="" />
<input
type="text"
placeholder="Location..."
className="px-3 border-b-2 py-1 text-dark focus:outline-none w-72 bg-transparent cursor-pointer"
/>
</div>
<div className="flex gap-3 cursor-pointer text-white items-center relative z-50 justify-center">
<FcCalendar size={36} className="text-white" />
<p onClick={() => setOpenDate(!openDate)}>
{`${format(date[0].startDate, 'MM/dd/yyyy')}`}
<span className="mx-2 font-thin">to</span>
{`${format(date[0].endDate, 'MM/dd/yyyy')}`}
</p>
{openDate && (
<DateRange
editableDateInputs={true}
onChange={(item) => setDate([item.selection])}
moveRangeOnFirstSelection={false}
ranges={date}
className="absolute top-[50px]"
/>
)}
</div>
<div className="flex gap-3 text-white items-center justify-center relative">
<HiUserGroup size={36} className="" />
<p
className="cursor-pointer"
onClick={() => setOpenOptions(!openOptions)}
>{`${options.adult} adult • ${options.children} children • ${options.room} room`}</p>
{openOptions && (
<div className="absolute top-[50px] bg-white text-gray-800 rounded-sm px-3 py-4 drop-shadow-2xl">
{/* This is person choose */}
<ButtonHeader
title="Adult"
buttonName="adult"
quantity={options.adult}
handleOption={handleOption}
/>
<ButtonHeader
disabled={options.children <= 1}
title="Children"
buttonName="children"
quantity={options.children}
handleOption={handleOption}
/>
<ButtonHeader
disabled={options.room <= 1}
title="Room"
buttonName="room"
quantity={options.room}
handleOption={handleOption}
/>
</div>
)}
</div>
<div className="flex gap-1 cursor-pointer bg-blue-200 hover:bg-blue-300 duration-300 rounded-full px-4 py-3 items-center justify-center">
<FcSearch size={24} className="" />
<p className="text-lg font-bold">Search</p>
</div>
</div>
</div>
</div>
)
This is featured.jsx that contains the image, which, and it is under the header.jsx
const Featured = () => {
return (
<div className="w-full max-w-5xl flex justify-between gap-4 ">
<div className="w-full object-cover relative">
<img
src="https://images.unsplash.com/photo-1472213984618-c79aaec7fef0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=855&q=80"
alt=""
className="w-full object-fit z-[1]"
/>
<div className="text-white rounded-lg h-64 absolute bottom-4">
<p className="text-5xl absolute">Dublin</p>
<p className="text-5xl absolute">123 Properties</p>
</div>
</div>
</div>
)
}
export default Featured
live demo: https://booking-ui-sand.vercel.app/
repo: https://github.com/Zurcemozz/bookingUI
I don't know if this is a great approach, I inline code the CSS to the feature and make it negative. is there any way to apply it in tailwind CSS?
const Featured = () => {
return (
<div className="w-full max-w-7xl flex justify-space-between gap-4 ">
<div
className="relative text-white drop-shadow-lg h-64"
style={{ zIndex: -1 }}
>
<img
src="https://images.unsplash.com/photo-1511515828069-1e4853d8b336?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
alt=""
className="w-full object-cover"
/>
<div className="absolute bottom-5 left-4">
<p className="text-7xl">Dublin</p>
<p className="text-5xl">123 Properties</p>
</div>
</div>
</div>
)
}
export default Featured
Tailwind allows the use of negative values. You could try to use the class -z-10 instead of using the inline style.
I've got a small formating problem. My CSS makes too long boxes (while I'm using the same CSS/Tailwind in the first column as the second one). If i remove flex, the problem disappears, but the content is no longer in the same row.
Here are some screenshots of the problem:
First (with flex) https://ctrlv.link/ova1 and https://ctrlv.link/zvp7
Secondary (without flex) https://ctrlv.link/MeHq
Code:
mostly just loading data and not that important stuff
import { useState, useEffect, useRef, useContext } from "react";
import { AppContext } from "/src/App";
import Axios from 'axios'
export default function Upgrader() {
const inputRefPerc = useRef(null)
const { userID } = useContext(AppContext);
const [ItemsList, setItemsList] = useState([])
const [Inventory, setInventory] = useState([])
useEffect(() => {
Axios.get(`http://localhost:3030/api/getItems`).then((response)=> {
setItemsList(response.data)
})
}, [])
useEffect(() => {
Axios.get(`http://localhost:3030/api/getInventory3/${userID}`).then((response)=> {
setInventory(response.data);
})
}, [])
return (
<div className="flex justify-center align-bottom">
<div className="bg-slate-800 rounded-cool text-white w-3/5 p-3">
<div className=" divide-y-2">
<h1 className="text-4xl font-bold text-slate-200 py-2" >
Upgrader 🔝
</h1>
<p/>
</div>
<div className="flex flex-row">
<div className="w-[40%] justify-center flex font-bold text-xl"><h1>Your Items</h1></div>
<div className="w-[20%] justify-center flex font-bold text-xl"><h1>Selector</h1></div>
<div className="w-[40%] justify-center flex font-bold text-xl"><h1>Possible Drops</h1></div>
</div>
This is where the problem happens -
<div className="flex flex-row">
First column
<div className="grid-cols-3 grid p-3 mt-2 w-[40%]">
{Inventory.map((val) => (
<div key={val.IDItem} className="cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700
hover:bg-gray-700 hover:m-0.5 hover:px-3 hover:border-2 hover:border-white-200">
<img className="" src={`src/images/skins/${val.SkinImage}`} alt={val.SkinImage}/>
<h1>{val.SkinName}</h1>
<h1>{val.QualityName}</h1>
<h1>{val.RarityName}</h1>
<h1>{val.ItemPrice} Tokens</h1>
</div>
))}
</div>
Secondary column
<div className="p-3 mt-2 w-[20%]">
<div className="cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700
hover:bg-gray-700 hover:border-2 hover:border-white-200 h-[15rem]
transition-all">
<h1>Placeholder</h1>
</div>
<div className="flex flex-auto justify-center">
<div className="cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700
hover:bg-gray-700 hover:border-2 hover:border-white-200
transition-all">
<h1 onClick={() => {inputRefPerc.current.value= 10}}>+10%</h1>
</div>
<div onClick={() => {inputRefPerc.current.value= 20}} className="cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700
hover:bg-gray-700 hover:border-2 hover:border-white-200
transition-all">
<h1>+20%</h1>
</div>
<div onClick={() => {inputRefPerc.current.value= 30}} className="cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700
hover:bg-gray-700 hover:border-2 hover:border-white-200
transition-all">
<h1>+30%</h1>
</div>
</div>
<div className="cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700
hover:bg-gray-700 hover:border-2 hover:border-white-200
transition-all flex flex-auto">
<h1 className="whitespace-nowrap">Chance: {""}</h1><input ref={inputRefPerc} type="number" min="1" max="100" className=" text-black w-[60px]"></input><h1>{""} %</h1>
</div>
<button
className=' border-2 border-green-700 bg-green-400 hover:bg-green-600 text-green-900 hover:text-rose-50 w-[100%] h-10 rounded-cool my-2 transition-all'
>
Let's go xd
</button>
</div>
The third column
<div className="grid-cols-3 grid p-3 mt-2 w-[40%]">
{ItemsList.map((val) => (
<div key={val.IDItem} className="cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700
hover:bg-gray-700 hover:m-0.5 hover:px-3 hover:border-2 hover:border-white-200
transition-all">
<img className="" src={`src/images/skins/${val.SkinImage}`} alt={val.SkinImage}/>
<h1>{val.SkinName}</h1>
<h1>{val.QualityName}</h1>
<h1>{val.RarityName}</h1>
<h1>{val.ItemPrice} Tokens</h1>
</div>
))}
</div>
</div>
</div>
</div>
);
}