update

app/ui/dashboard/latest-invoices.tsx

@@ -1,11 +1,11 @@
-import { ArrowPathIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
-import Image from 'next/image';
-import { lusitana } from '@/app/ui/fonts';
-import { LatestInvoice } from '@/app/lib/definitions';
-import { fetchLatestInvoices } from '@/app/lib/data';
+import { ArrowPathIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
+import Image from "next/image";
+import { fetchLatestInvoices } from "@/app/lib/data";
+import { lusitana } from "@/app/ui/fonts";
 
-export default async function LatestInvoices() { // Remove props
+export default async function LatestInvoices() {
+  // Remove props
   const latestInvoices = await fetchLatestInvoices();
 
   return (
@@ -16,44 +16,46 @@ export default async function LatestInvoices() { // Remove props
       <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
         {/* NOTE: comment in this code when you get to this point in the course */}
 
-        { <div className="bg-white px-6">
-          {latestInvoices.map((invoice, i) => {
-            return (
-              <div
-                key={invoice.id}
-                className={clsx(
-                  'flex flex-row items-center justify-between py-4',
-                  {
-                    'border-t': i !== 0,
-                  },
-                )}
-              >
-                <div className="flex items-center">
-                  <Image
-                    src={invoice.image_url}
-                    alt={`${invoice.name}'s profile picture`}
-                    className="mr-4 rounded-full"
-                    width={32}
-                    height={32}
-                  />
-                  <div className="min-w-0">
-                    <p className="truncate text-sm font-semibold md:text-base">
-                      {invoice.name}
-                    </p>
-                    <p className="hidden text-sm text-gray-500 sm:block">
-                      {invoice.email}
-                    </p>
-                  </div>
-                </div>
-                <p
-                  className={`${lusitana.className} truncate text-sm font-medium md:text-base`}
+        {
+          <div className="bg-white px-6">
+            {latestInvoices.map((invoice, i) => {
+              return (
+                <div
+                  key={invoice.id}
+                  className={clsx(
+                    "flex flex-row items-center justify-between py-4",
+                    {
+                      "border-t": i !== 0,
+                    },
+                  )}
                 >
-                  {invoice.amount}
-                </p>
-              </div>
-            );
-          })}
-        </div> }
+                  <div className="flex items-center">
+                    <Image
+                      src={invoice.image_url}
+                      alt={`${invoice.name}'s profile picture`}
+                      className="mr-4 rounded-full"
+                      width={32}
+                      height={32}
+                    />
+                    <div className="min-w-0">
+                      <p className="truncate text-sm font-semibold md:text-base">
+                        {invoice.name}
+                      </p>
+                      <p className="hidden text-sm text-gray-500 sm:block">
+                        {invoice.email}
+                      </p>
+                    </div>
+                  </div>
+                  <p
+                    className={`${lusitana.className} truncate text-sm font-medium md:text-base`}
+                  >
+                    {invoice.amount}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        }
         <div className="flex items-center pb-2 pt-6">
           <ArrowPathIcon className="h-5 w-5 text-gray-500" />
           <h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3>