Im creating an acordion using reactjs and tailwincss but the transition property is not working i have no idea why here is the code :
<fieldset className='border-b-2 border-slate-200 w-3/4'>
<button id="dropdownCheckboxButton"
onClick={()=>{toggle()}}
className="text-black font-semibold hover:underline focus:outline-none text-lg w-full py-4
flex justify-between " type="button">Brand
<svg className={`w-6 h-6 ml-2 ${isOpen===null?"rotate-180":""}`} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg></button>
<div id="dropdownDefaultCheckbox" className={`h-auto ${isOpen===null?"":"hidden transition-all duration-300"}`}>
<ul className="py-4 pl-1 space-y-3 text-sm text-gray-700">
{
brands.map((brand,key)=>(
<li key={brand.id}>
<div className="flex items-center">
<input id="checkbox-item-1" type="checkbox" value="" className="w-5 h-5 border-black rounded-full border-2 focus:ring-slate-600/50 ring-offset-2 focus:ring-2 accent-black "/>
<label htmlFor="checkbox-item-1" className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">{brand.name}</label>
</div>
</li>
))
}
</ul>
</div>
</fieldset>
Related
The code below comes from https://headlessui.com/react/popover.
As you can see, it uses a function to render Popover.Button.
In enzyme, no matter use shallow or mount, the result tree without elements wrapped by React.Fragment.
So I want to ask is there a way to render the whole dom in enzyme or #testing-library/react
export default function Example() {
return (
<div className="fixed top-16 w-full max-w-sm px-4">
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={`
${open ? '' : 'text-opacity-90'}
group inline-flex items-center rounded-md bg-orange-700 px-3 py-2 text-base font-medium text-white hover:text-opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}
>
<span>Solutions</span>
<ChevronDownIcon
className={`${open ? '' : 'text-opacity-70'}
ml-2 h-5 w-5 text-orange-300 transition duration-150 ease-in-out group-hover:text-opacity-80`}
aria-hidden="true"
/>
</Popover.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-sm -translate-x-1/2 transform px-4 sm:px-0 lg:max-w-3xl">
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
<div className="relative grid gap-8 bg-white p-7 lg:grid-cols-2">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 flex items-center rounded-lg p-2 transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
>
<div className="flex h-10 w-10 shrink-0 items-center justify-center text-white sm:h-12 sm:w-12">
<item.icon aria-hidden="true" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-900">
{item.name}
</p>
<p className="text-sm text-gray-500">
{item.description}
</p>
</div>
</a>
))}
</div>
<div className="bg-gray-50 p-4">
<a
href="##"
className="flow-root rounded-md px-2 py-2 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
>
<span className="flex items-center">
<span className="text-sm font-medium text-gray-900">
Documentation
</span>
</span>
<span className="block text-sm text-gray-500">
Start integrating products and tools
</span>
</a>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
)
}
I am developing a search bar that performs the search by calling an api, I encounter an error: Parsing error: Missing semicolon. The error comes from this part of the code:
const form = event.target as HTMLFormElement;
specifically between the event.target and the as. Could someone explain me the reason of this error and how to solve it?
import React, { FormEvent, useState, useEffect } from "react";
import Select, { SingleValue } from "react-select";
import { getCollegiate } from "../../api/drupalAPI";
import { Collegiate } from "#icofcv/common";
import Loader from "../spinner/Loader";
interface Props {
showModal: boolean;
closeModal: () => void;
}
export const ModalFilterCollegiate: React.FC<Props> = ({
children,
showModal,
closeModal,
}) => {
const [collegiateList, setCollegiateList] = useState<Collegiate[]>([]);
const [collegiateSearch, setCollegiateSearch] = useState("");
const searchForCollegiates = async (query: String): Promise<Collegiate[]> => {
const result = await fetch(`/collegiate?filter=${query}`);
return (await result.json()).results;
};
useEffect(() => {
(async () => {
const query = encodeURIComponent(collegiateSearch);
const response = await searchForCollegiates(query);
setCollegiateList(response);
})();
}, [collegiateSearch]);
const search = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
const form = event.target as HTMLFormElement;
const input = form.querySelector("#searchText") as HTMLInputElement;
setCollegiateSearch(input.value);
input.value = "";
};
return (
<>
<div>
{showModal ? (
<>
<div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
<div className="relative p-2 w-full max-w-2xl h-full md:h-auto">
{/*content*/}
<div className="relative bg-white rounded-lg shadow">
{/*header*/}
<div className="flex justify-between items-start px-4 py-3 rounded-t border-b">
<h3 className="text-lg font-medium">Buscar Colegiado</h3>
<button
className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center"
onClick={closeModal}
>
<svg
aria-hidden="true"
className="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
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"
></path>
</svg>
</button>
</div>
{/*body*/}
<div className="relative px-3 py-3 flex-auto overflow-auto modal-body">
<form
className="searchForm"
onSubmit={(event) => search(event)}
>
<div className="grid md:grid-cols-2 md:gap-4">
<div className="relative z-0 w-full group my-2">
<label
htmlFor=""
className="block mb-2 text-xs font-medium text-stone-600"
>
Número colegiado
</label>
<input
name=""
type="text"
id=""
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
/>
<p className="mt-2 text-xs text-red-600 hidden">
Completa este espacio
</p>
</div>
</div>
<div className="grid md:grid-cols-2 md:gap-4">
<div className="relative z-0 w-full group my-2">
<label
htmlFor=""
className="block mb-2 text-xs font-medium text-stone-600"
>
Nombre
</label>
<input
name=""
type="text"
id="searchText"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
/>
<p className="mt-2 text-xs text-red-600 hidden">
Completa este espacio
</p>
</div>
<div className="relative z-0 w-full group my-2">
<label
htmlFor=""
className="block mb-2 text-xs font-medium text-stone-600"
>
Apellidos
</label>
<input
name=""
type="text"
id=""
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
/>
<p className="mt-2 text-xs text-red-600 hidden">
Completa este espacio
</p>
</div>
</div>
<div className="grid md:grid-cols-2 md:gap-4">
<div className="relative z-0 w-full group">
<label
htmlFor=""
className="block mb-2 text-xs font-medium text-stone-600"
>
Provincia
</label>
<select className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
<option>Cualquier Provincia</option>
</select>
<p className="mt-2 text-xs text-red-600 hidden">
Completa este espacio
</p>
</div>
<div className="relative z-0 w-full group">
<label
htmlFor=""
className="block mb-2 text-xs font-medium text-stone-600"
>
Tipo
</label>
<select className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
<option>Seleccionar tipo</option>
<option>Ejercientes</option>
<option>No ejercientes</option>
<option>Honorarios</option>
<option>Colegiados de honor</option>
</select>
<p className="mt-2 text-xs text-red-600 hidden">
Completa este espacio
</p>
</div>
</div>
<div className="flex items-center justify-end px-4 py-3 border-t border-solid border-slate-200 rounded-b gap-2">
<button
className="btn text-black text-sm background-transparent px-8 outline-none focus:outline-none focus:ring-teal-600 focus:border-teal-600"
type="button"
onClick={closeModal}
>
Cancelar
</button>
<button
className="btn bg-teal-600 hover:bg-teal-700 text-white text-sm active:bg-teal-700 px-8 outline-none focus:outline-none"
type="button"
>
Buscar
</button>
</div>
</form>
</div>
{/*footer*/}
{collegiateList.map((collegiate) => (
<tr key={collegiate.id} className="bg-white border-b">
<td className="py-2 px-6">{collegiate.color}</td>
<td className="py-2 px-6">{collegiate.collegiate}</td>
<td className="py-2 px-6">{collegiate.firstname}</td>
<td className="py-2 px-6">{collegiate.lastname}</td>
<td className="py-2 px-6">{collegiate.provincia}</td>
</tr>
))}
</div>
</div>
</div>
<div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
</>
) : null}
</div>
</>
);
};
I am creating my components => PostCard.JSX and pulling the data from graphCMS. Everything was going good and created more files under the components folder. I took a break and I exited. But when I came back to code again, I run the app using npm run dev, it gives me this error:
error - components/PostCard.jsx (35:27) # PostCard
TypeError: Cannot read property 'name' of null
33 |
34 | <img
35 | alt={post.author.name}
I do not know why this error happened now, however, the app was working before. here is my code for the PostCard.jsx
import React from 'react';
//import Image from 'next/image';
import moment from 'moment';
import Link from 'next/link';
const PostCard = ({ post }) => {
/* console.log(post); */
{/* <div>
{post.title}
{post.author.name}
{post.excerpt}
{post.featuredImage.url}
</div> */}
return (
<div className="bg-white shadow-lg rounded-lg p-0 lg:p-8 pb-12 mb-8">
<div className="relative overflow-hidden shadow-md pb-80 mb-6">
<img
src={post.featuredImage.url}
alt={post.title}
className="object-top absolute h-80 w-full object-cover shadow-lg rounded-t-lg lg:rounded-lg"
/>
</div>
<h1 className="transition duration-700 text-center mb-8 cursor-pointer hover:text-pink-600 text-3xl font-semibold">
<Link href={`/post/${post.slug}`}>{post.title}</Link>
</h1>
<div className="block lg:flex text-center items-center justify-center mb-8 w-full">
<div className="flex items-center justify-center mb-4 lg:mb-0 w-full lg:w-auto mr-8 items-center">
<img
alt={post.author.name}
height="30px"
width="30px"
className="align-middle rounded-full"
src={post.author.photo.url}
/>
<p className="inline align-middle text-gray-700 ml-2 font-medium text-lg">{post.author.name}</p>
</div>
<div className="font-medium text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 inline mr-2 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<span className="align-middle">
{moment(post.createdAt).format('MMM DD, YYYY')}
</span>
</div>
</div>
<p className="text-center text-lg text-gray-700 font-normal px-4 lg:px-20 mb-8">
{post.excerpt}
</p>
<div className="text-center">
<Link href={`/post/${post.slug}`}>
<span className="transition duration-500 ease transform hover:-translate-y-1 inline-block bg-pink-600 text-lg font-medium rounded-full text-white px-8 py-3 cursor-pointer">
Continue Reading
</span>
</Link>
</div>
</div>
)
};
export default PostCard;
Can someone help, please? I tried to solve it but I couldn't.
Thank you
try passing the initial props like this
<div className="lg:col-span-8 col-span-1">
{
posts.map((post, index) => (
<PostCard post={post.node} key={post.title} />
))
}
</div>
Take a look on the guy that is calling PostCard because it's passing post.author as null.
A good approach to avoid this kind of error to be shown to users is to use lodash get(post, 'author.name', ''), but this will not solve your problem, only avoid user to see it. Your problem is in the guy that's calling PostCard.
I am using React with Tailwind CSS. I would like to right-align my navigation links. Here is a pic of what I did:
Actually, I would like to have Dashboard Team Project Calendar Reports on the right.
Here is my code:
import React, { useState } from "react";
import { Transition } from "#headlessui/react";
function Nav() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<nav className="bg-gray-800">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
<div className="flex-shrink-0">
<img className="h-8 w-32" alt="Workflow" />
</div>
<div className="hidden md:block">
<div className="space-x-4">
<a
href="#"
className=" hover:bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium"
>
Dashboard
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Team
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Projects
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Calendar
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Reports
</a>
</div>
</div>
</div>
<div className="-mr-2 flex md:hidden">
<button
onClick={() => setIsOpen(!isOpen)}
type="button"
className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
aria-controls="mobile-menu"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
{!isOpen ? (
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
) : (
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
)}
</button>
</div>
</div>
</div>
<Transition
show={isOpen}
enter="transition ease-out duration-100 transform"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75 transform"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
{(ref) => (
<div className="md:hidden" id="mobile-menu">
<div ref={ref} className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a
href="#"
className="hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium"
>
Dashboard
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Team
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Projects
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Calendar
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Reports
</a>
</div>
</div>
)}
</Transition>
</nav>
</div>
);
}
export default Nav;
I tried to do that items-end but without any effects…
You can see my project there:
My project
Thank you very much!
I've modified your nav component as below, hope this can help you:
function Nav() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<nav className="bg-gray-800">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center w-full"> //added w-full
<div className="flex-shrink-0">
<img className="h-8 w-32" alt="Workflow" />
</div>
<div className="hidden md:block m-auto"> //added m-auto
<div className="items-end space-x-4">
<a
href="#"
className=" hover:bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium"
>
Dashboard
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Team
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Projects
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Calendar
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Reports
</a>
</div>
</div>
</div>
<div className="-mr-2 flex md:hidden">
<button
onClick={() => setIsOpen(!isOpen)}
type="button"
className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
aria-controls="mobile-menu"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
{!isOpen ? (
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
) : (
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
)}
</button>
</div>
</div>
</div>
<Transition
show={isOpen}
enter="transition ease-out duration-100 transform"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75 transform"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
{(ref) => (
<div className="md:hidden" id="mobile-menu">
<div ref={ref} className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a
href="#"
className="hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium"
>
Dashboard
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Team
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Projects
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Calendar
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Reports
</a>
</div>
</div>
)}
</Transition>
</nav>
</div>
);
}
export default Nav;
try this,
...
<div className="flex justify-between h-16"> <------ "just give justify-between"
<div className="flex items-center"> <----- "delete this div and </div> also"
<div className="flex-shrink-0">
...
Happy coding :)
I am a newbie learning React & Tailwind. I have a Navbar component which I have written like following,
const Navbar = () => {
const [showModal, setShowModal] = useState(false);
return (
<>
<nav className="flex justify-between items-center h-16 bg-white text-black relative shadow-md font-quicksand">
<Link to='/' className='pl-8'>Project</Link>
<div className="px-4 cursor-pointer md:hidden">
{/* <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg> */}
<button
type="button"
className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
id="main-menu"
aria-haspopup="true"
onClick={() => setShowModal(true)}
>
<span className="sr-only">Open main menu</span>
<svg className="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<div className="pr-8 md:block hidden">
<Link to='/' className='p-4 font-bold'>Home</Link>
<Link to='/menu' className='p-4 font-bold'>Menu</Link>
<Link to='/about' className='p-4 font-bold'>About</Link>
<Link to='/contact' className='p-4 font-bold'>Contact</Link>
<Link to='/login' className="p-4 font-bold text-indigo-600 hover:text-indigo-500" role="menuitem">Log in</Link>
<Link to='/register' className="p-4 font-bold text-indigo-600 hover:text-indigo-500" role="menuitem">Register</Link>
</div>
</nav>
{showModal ? (
<div className="absolute top-0 inset-x-0 p-2 transition duration-500 ease-in-out transform origin-top-right md:hidden">
<div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="px-5 pt-4 flex items-center justify-between">
<div className="-mr-2">
<button
type="button"
className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
onClick={() => setShowModal(false)}
>
<span className="sr-only">Close main menu</span>
<svg className="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
<div className="px-2 pt-2 pb-3 space-y-1" role="none">
<Link to='/' className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Home</Link>
<Link to='/menu' className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Menu</Link>
<Link to='/about' className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">About</Link>
<Link to='/contact' className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50" role="menuitem">Contact</Link>
</div>
<div role="none">
<Link to='/login' className="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100" role="menuitem">
Log in
</Link>
</div>
<div role="none">
<Link to='/register' className="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100" role="menuitem">
Register
</Link>
</div>
</div>
</div>
</div>
) : null}
</>
)
}
As you can see that when the screen got smaller the hamburger menu button will appear and when I click on that button it opens a modal with all the header components (The modal code copied from tailwind official components Hero components).
The problem is when that modal appears tailwind transition animation suppose to happen but it is not working. What am i doing wrong here?? Do i have to use the react hook useEffect somehow to make this work??
Any kind of answer would be appreciated.