I dont want the folders not to take the extra height.
The folder object destructered here:
<div className='grid grid-cols-3 gap-4'>
{folders &&
folders.map((folder, index) => (
<Folder folder={folder} index={index} key={index} />
))}
</div>
The Folder.jsx
as you can see it is takig the extra height.
<div
className="border-2 border-gray-400 rounded-lg max-w-xs"
key={index}
>
<div className="flex my-2 mx-1 justify-between">
<p>{folder.name}</p>
<div>
<AddLink folderName={folder.name} />
<button onClick={() => deleteFolder(folder.name)}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</button>
</div>
</div>
<p className="flex sm:text-xs justify-end">{folder.date}</p>
Related
I need to remove the hover while the checkbox is checked.
Hovering I implemented at the expense of styling based on parent state (group).
Tried method style based on sibling state, but didn't work either
<div className="group">
<input className="peer hidden" id="check" type="checkbox" />
<label
className="
peer/label
group-hover:bg-[#F2F2F2]
group-hover:border-2
group-hover:border-solid
group-hover:border-[#F2F2F2]
flex
justify-center
items-center
peer-checked:bg-[#4DD599]
peer-checked:border-2
peer-checked:border-solid
peer-checked:border-[#4DD599]
w-5
h-5
rounded-full
border-2
border-solid
border-[#E8E8E8]
cursor-pointer
inline-block
"
htmlFor="check">
<svg
className="
group-hover:opacity-100
relative
left-[0.5px]
"
width="11"
height="8"
viewBox="0 0 11 8"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
className="
group-hover:stroke-[#b2b2b2]
stroke-[#f2f2f2]
ease-in-out"
d="M9.29999 1.20001L3.79999 6.70001L1.29999 4.20001"
stroke="#000"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</label>
</div>
- not correct
I'm using Next Js with Tailwind CSS for creating the website. Use Javascript to toggle the menu for Mobile devices. But Next Js click the nav menu link not closing the opened nav.
Button-
const Navbar = () => {
const [ isHidden, setIsHidden ] = useState(true)
return (
<>
<button onClick={() => setIsHidden(c => !c)} className="menu-button md:hidden rounded-lg focus:outline-none focus:shadow-outline">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path strokeLinecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
<path className="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<nav className={`mobile-menu flex-col flex-grow pb-4 md:pb-0 md:flex md:justify-end md:flex-row flex hidden ${isHidden ? "hidden" : ""}`}>
<Link href="/about">
<a className="md:mt-0 mt-3 px-3 py-2">About</a>
</Link>
<Link href="/about-us">
<a className="md:mt-0 mt-3 px-3 py-2">Boost</a>
</Link>
<Link href="/about-us">
<a className="md:mt-0 mt-3 px-3 py-2">Technology</a>
</Link>
<Link href="/about-us">
<a className="md:mt-0 mt-3 px-3 py-2">Contact</a>
</Link>
</nav>
</>
)
}
export default Navbar
Using the below Javascript for toggle Menu.
const btn = document.querySelector('button.menu-button');
const menu = document.querySelector(".mobile-menu");
btn.addEventListener("click", () => {
menu.classList.toggle("hidden");
})
It may be that your event listener was created multiple times (we don't see the whole code). More React like approach could look like this:
const Home = () => {
const [ isHidden, setIsHidden ] = useState(true)
return (
<button onClick={() => setIsHidden(c => !c)}>click me</button>
<nav className={`your classes ${isHidden ? "hidden" : ""}`}>
...
</nav>
)
}
So you have a state and based on that state you are adding "hidden" class. Button has an onclick handler which toggles the state.
If you want to close navbar also on link click you can try this approach:
<Link href="/about">
<a
onClick={(e) => {
e.preventDefault()
setIsHidden(true)
}
>About</a>
</Link>
I am having trouble positioning background color gray content to right side of my website. Any suggestions?
export function ContentImage(props: ImageProps): ReactElement | null {
const cn = classNames(
'relative sm:py-16 lg:py-0 m-0 right-0',
props.position === 'left' ? 'order-first' : 'order-first sm:order-last',
);
const backgroundCn = classNames(
'absolute inset-y-0 w-full bg-gray-50 rounded-r-3xl lg:right-72',
props.position === 'left' ? 'right-1/2' : 'left-3/4',
props.position === 'right' ? 'rounded-l-3xl' : 'rounded-r-3xl',
);
return (
<>
<div className={cn}>
<div
aria-hidden="true"
className="hidden overflow-hidden sm:block lg:absolute lg:inset-y-0 lg:right-0 lg:w-screen">
<div className={backgroundCn}/>
<svg
className="absolute top-8 left-1/2 -ml-3 lg:-right-8 lg:left-auto lg:top-12"
width={404}
height={392}
fill="none"
viewBox="0 0 404 392">
<defs>
<pattern
id="02f20b47-fd69-4224-a62a-4c9de5c763f7"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse">
<rect
x={0}
y={0}
width={4}
height={4}
className="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={392}
fill="url(#02f20b47-fd69-4224-a62a-4c9de5c763f7)"
/>
</svg>
</div>
<div className="relative order-last mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:px-0 lg:py-20">
<div className="relative overflow-hidden pt-64 pb-10">
<div className="absolute inset-0 h-full w-full">
<Image
src={props.image}
alt={props.imageAlt}
objectFit="cover"
layout="fill"
className={props.className}
/>
</div>
</div>
</div>
</div>
</>
);
}
my problem is center elements with Tailwind Grid.
GroupTooltipIcon1/GroupTooltipIcon2 are component that contain an svg.
I have to be able to center the svg component within this grid tailwind, can you help me?
<div className="mt-[75px] grid grid-cols-2 gap-2 justify-items-center">
<div>
<div className="iconInsideTooltip">
<GroupTooltipIcon1 width="48px" height="48px" />
</div>
<TextSection
p5={
<>
<div>
Testo 1
</div>
</>
}
/>
</div>
</div>
const GroupTooltipIcon1 = ({
width = "48",
height = "48",
classes = "stroke-white",
}) => {
return (
<svg
className={classes}
style={{ width, height }}
viewBox={`0 0 48 48`}
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_206_1350)">
<path d="M31.6027 22.5623L34.1509 20.0644C38.9389 22.0715 42.8398 19.6492 42.8398 19.6492C48.6345 14.1502 46.9798 6.58116 46.9798 6.58116L40.1784 13.3197C40.1784 13.3197 37.9889 13.3197 36.2775 11.8977C34.8555 10.1801 34.8555 7.99681 34.8555 7.99681L41.6003 1.20169C41.6003 1.20169 34.0313 -0.453049 28.5323 5.34168C28.5323 5.34168 26.11 9.24259 28.117 14.0306L23.373 18.869"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"/>
</g>
<defs>
<clipPath id="clip0_206_1350">
<rect width="48" height="48" fill="white"/>
</clipPath>
</defs>
</svg>
);
};
export default React.memo(GroupTooltipIcon1);
I have to be able to center the svg component within this grid tailwind, can you help me?
Thank you for help
I found a solution by doing it this way. I hope it will be useful to someone
<div className="mt-[75px] grid grid-cols-2 gap-2 items-start">
<div>
<div className="iconInsideTooltip flex justify-center">
<GroupTooltipIcon1 width="48px" height="48px" />
</div>
<TextSection
customClasses={{ "text-center p-5": "p5" }}
p5={
<>
<div>
Testo 1
</div>
</>
}
/>
</div>
</div>
I am trying to hide an Event div when there is no event date showing
Here is how my project look like:
and here is how it appear when there is no event on that day:
Here is my following component code:
<div className="event-list-item-content">
<div className="header">
<span className="announcements">Events</span>
<button className="plus">
<ControlPoint />
</button>
</div>
{teamData.Events.map((event, index) => (
<div key={index} className="list-events-description">
{moment(event.date).format("YYYY-MM-DD") ===
moment(date).format("YYYY-MM-DD") && (
<div className="content">
{event.description}
<span>
{moment(event.timestart, "HH:mm:ss").format("h:mm A")}
<svg
width="8"
height="12"
viewBox="0 0 8 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.589844 1.41L5.16984 6L0.589843 10.59L1.99984 12L7.99984 6L1.99984 6.16331e-08L0.589844 1.41Z"
fill="#00A682"
/>
</svg>
</span>
<hr />
</div>
)}
</div>
))}
</div>
How can I hide this element ?
You need to check whether teamData.Events is empty. If it is not, then display. Otherwise, it will not be shown.
<div className='event-list-item-content'>
{teamData.Events.length !== 0 && (
<div className='header'>
<span className='announcements'>Events</span>
<button className='plus'>
<ControlPoint />
</button>
</div>
)}
{teamData.Events.map((event, index) => (
<div key={index} className='list-events-description'>
{moment(event.date).format('YYYY-MM-DD') === moment(date).format('YYYY-MM-DD') && (
<div className='content'>
{event.description}
<span>
{moment(event.timestart, 'HH:mm:ss').format('h:mm A')}
<svg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M0.589844 1.41L5.16984 6L0.589843 10.59L1.99984 12L7.99984 6L1.99984 6.16331e-08L0.589844 1.41Z' fill='#00A682' />
</svg>
</span>
<hr />
</div>
)}
</div>
))}
</div>