Rename Cards component to CardWrapper (#329)

* Rename <Cards/> to <CardWrapper/>

* Update starter-example

dashboard/final-example/app/dashboard/(overview)/page.tsx

@@ -1,4 +1,4 @@
-import Cards from '@/app/ui/dashboard/cards';
+import CardWrapper from '@/app/ui/dashboard/cards';
 import RevenueChart from '@/app/ui/dashboard/revenue-chart';
 import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
 import { lusitana } from '@/app/ui/fonts';
@@ -17,7 +17,7 @@ export default async function Page() {
       </h1>
       <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
         <Suspense fallback={<CardsSkeleton />}>
-          <Cards />
+          <CardWrapper />
         </Suspense>
       </div>
       <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">

dashboard/final-example/app/ui/dashboard/cards.tsx

@@ -14,7 +14,7 @@ const iconMap = {
   invoices: InboxIcon,
 };
 
-export default async function Cards() {
+export default async function CardWrapper() {
   const {
     numberOfInvoices,
     numberOfCustomers,

dashboard/starter-example/app/ui/dashboard/cards.tsx

@@ -13,7 +13,7 @@ const iconMap = {
   invoices: InboxIcon,
 };
 
-export default async function Cards() {
+export default async function CardWrapper() {
   return (
     <>
       {/* NOTE: comment in this code when you get to this point in the course */}