Trying to display Cards (tailwindcss) in my NextJs App router application (pasted below). However, I merely copying and pasteing the code threw an error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `SummaryComponentBox`.
- What seems to work in the past (with tailwindcss/nextjs) for some reasons now throws an error. Please keep in mind that this is
Default exportas shown in the code. I noticed that a lot of solutions online says to check how it wasexport/import. Can you spot why this issue continue to persist, and how can I resolve it.
import { useState } from "react";
import {
ArrowDownCircleIcon,
ArrowPathIcon,
ArrowUpCircleIcon,
EllipsisHorizontalIcon,
} from "@heroicons/react/20/solid";
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
const SummaryComponentBox = () => {
const [showSummary, setShowSummary] = useState(true);
const clients = [
{
id: 1,
name: "Tuple",
imageUrl: "https://tailwindui.com/img/logos/48x48/tuple.svg",
lastInvoice: {
date: "December 13, 2022",
dateTime: "2022-12-13",
amount: "$2,000.00",
status: "Overdue",
},
},
{
id: 2,
name: "SavvyCal",
imageUrl: "https://tailwindui.com/img/logos/48x48/savvycal.svg",
lastInvoice: {
date: "January 22, 2023",
dateTime: "2023-01-22",
amount: "$14,000.00",
status: "Paid",
},
},
{
id: 3,
name: "Reform",
imageUrl: "https://tailwindui.com/img/logos/48x48/reform.svg",
lastInvoice: {
date: "January 23, 2023",
dateTime: "2023-01-23",
amount: "$7,600.00",
status: "Paid",
},
},
];
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
return (
<>
{showSummary ? (
<>
<div className="grid grid-cols-2 gap-4 justify-center items-center">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
<div className="flex items-center justify-between">
<h2 className="text-base font-semibold leading-7 text-gray-900">
Recent clients
</h2>
<a
href="#"
className="text-sm font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
>
View all<span className="sr-only">, clients</span>
</a>
</div>
<ul
role="list"
className="mt-6 grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8"
>
{clients.map((client) => (
<li
key={client.id}
className="overflow-hidden rounded-xl border border-gray-200"
>
<div className="flex items-center gap-x-4 border-b border-gray-900/5 bg-gray-50 p-6">
<img
src={client.imageUrl}
alt={client.name}
className="h-12 w-12 flex-none rounded-lg bg-white object-cover ring-1 ring-gray-900/10"
/>
<div className="text-sm font-medium leading-6 text-gray-900">
{client.name}
</div>
<Menu as="div" className="relative ml-auto">
<MenuButton className="-m-2.5 block p-2.5 text-gray-400 hover:text-gray-500">
<span className="sr-only">Open options</span>
<EllipsisHorizontalIcon
className="h-5 w-5"
aria-hidden="true"
/>
</MenuButton>
<MenuItems
transition
className="absolute right-0 z-10 mt-0.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 transition focus:outline-none data-[closed]:scale-95 data-[closed]:transform data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in"
>
<MenuItem>
{({ focus }) => (
<a
href="#"
className={classNames(
focus ? "bg-gray-50" : "",
"block px-3 py-1 text-sm leading-6 text-gray-900"
)}
>
View
<span className="sr-only">
, {client.name}
</span>
</a>
)}
</MenuItem>
<MenuItem>
{({ focus }) => (
<a
href="#"
className={classNames(
focus ? "bg-gray-50" : "",
"block px-3 py-1 text-sm leading-6 text-gray-900"
)}
>
Edit
<span className="sr-only">
, {client.name}
</span>
</a>
)}
</MenuItem>
</MenuItems>
</Menu>
</div>
<dl className="-my-3 divide-y divide-gray-100 px-6 py-4 text-sm leading-6">
<div className="flex justify-between gap-x-4 py-3">
<dt className="text-gray-500">Last invoice</dt>
<dd className="text-gray-700">
<time dateTime={client.lastInvoice.dateTime}>
{client.lastInvoice.date}
</time>
</dd>
</div>
<div className="flex justify-between gap-x-4 py-3">
<dt className="text-gray-500">Amount</dt>
<dd className="flex items-start gap-x-2">
<div className="font-medium text-gray-900">
{client.lastInvoice.amount}
</div>
<div
className={classNames(
statuses[client.lastInvoice.status],
"rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset"
)}
>
{client.lastInvoice.status}
</div>
</dd>
</div>
</dl>
</li>
))}
</ul>
</div>
</div>
</div>
</>
) : (
"You have no active campaign. Launch one today."
)}
</>
);
};
export default SummaryComponentBox;