Merge pull request #5345 from yangshun/yangshun/www/react-keys

chore(www): fix all the react duplicate keys warnings

www/components/Carousels/SplitCodeBlockCarousel.tsx

@@ -70,7 +70,7 @@ function SplitCodeBlockCarousel(props: SplitCodeBlockCarousel) {
       >
         {props.content.map((extension, i) => {
           return (
-            <Tabs.Panel label={extension.title} id={i.toString()}>
+            <Tabs.Panel label={extension.title} id={i.toString()} key={i}>
               <span></span>
             </Tabs.Panel>
           )
@@ -140,7 +140,7 @@ function SplitCodeBlockCarousel(props: SplitCodeBlockCarousel) {
                         </Typography.Text>
                         {extension.badges &&
                           extension.badges.map((badge, i) => {
-                            return <Badge>{badge}</Badge>
+                            return <Badge key={badge}>{badge}</Badge>
                           })}
                       </div>
                     </Space>

www/components/ImageGrid.tsx

@@ -81,39 +81,37 @@ const ImageGrid = ({
         }
 
         return (
-          <>
-            <Container link={x.link}>
-              <div
-                key={`${x.name}-${i}`}
-                className={`
+          <Container link={x.link} key={i}>
+            <div
+              key={`${x.name}-${i}`}
+              className={`
                   col-span-1 flex items-center justify-center 
                 bg-gray-50 
                 dark:bg-gray-700
                   ${x.link && 'hover:bg-gray-100 dark:hover:bg-gray-600'}
                   p-8 ${className}`}
-              >
-                <div
-                  className={`relative overflow-auto w-full h-8
+            >
+              <div
+                className={`relative overflow-auto w-full h-8
                     ${imgPadding[padding]}
                   `}
-                >
-                  <Image
-                    layout="fill"
-                    src={`${x.image}`}
-                    alt={x.alt}
-                    objectFit="scale-down"
-                    objectPosition="center"
-                    className="
+              >
+                <Image
+                  layout="fill"
+                  src={`${x.image}`}
+                  alt={x.alt}
+                  objectFit="scale-down"
+                  objectPosition="center"
+                  className="
                       bg-no-repeat
                     filter 
                     contrast-0
                     opacity-50
                   "
-                  />
-                </div>
+                />
               </div>
-            </Container>
-          </>
+            </div>
+          </Container>
         )
       })}
     </div>

www/pages/auth/Auth.tsx

@@ -81,7 +81,7 @@ function AuthPage(props: Props) {
             "Including PostgreSQL's policy engine, for fine-grained access rules.",
           ]}
           image={[
-            <div className="w-full header--light block">
+            <div className="w-full header--light block" key="light">
               <Image
                 src={`${basePath}/images/product/auth/header--light.png`}
                 alt="auth header"
@@ -90,7 +90,7 @@ function AuthPage(props: Props) {
                 height="1074"
               />
             </div>,
-            <div className="w-full header--dark mr-0 dark:block">
+            <div className="w-full header--dark mr-0 dark:block" key="dark">
               <Image
                 src={`${basePath}/images/product/auth/header--dark.png`}
                 alt="auth header"
@@ -128,6 +128,7 @@ function AuthPage(props: Props) {
                         src={`${basePath}/images/product/auth/${auth.name}-icon.svg`}
                         width={21}
                         alt={`${auth.name} auth login icon`}
+                        key={auth.name}
                       />
                     )
                   })}
@@ -179,7 +180,7 @@ function AuthPage(props: Props) {
             content={ApiExamples}
             size="large"
             text={[
-              <Typography.Text>
+              <Typography.Text key={0}>
                 <p className="text-base lg:text-lg">
                   APIs that you can understand. With powerful libraries that work on client and
                   server-side applications.
@@ -192,7 +193,7 @@ function AuthPage(props: Props) {
               </Typography.Text>,
             ]}
             footer={[
-              <div className="grid grid-cols-12 md:gap-8 lg:gap-0 xl:gap-16 mt-8">
+              <div className="grid grid-cols-12 md:gap-8 lg:gap-0 xl:gap-16 mt-8" key={0}>
                 <div className="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4">
                   <FeatureColumn
                     icon={<IconBriefcase />}

www/pages/blog.tsx

@@ -88,9 +88,9 @@ function Blog(props: any) {
         <div className="bg-white dark:bg-dark-800 overflow-hidden py-12">
           <div className="container mx-auto px-8 sm:px-16 xl:px-20 mt-16">
             <div className="mx-auto ">
-              {props.blogs.slice(0, 1).map((blog: any, idx: any) => {
-                return FeaturedThumb(blog)
-              })}
+              {props.blogs.slice(0, 1).map((blog: any, i: number) => (
+                <FeaturedThumb key={i} {...blog} />
+              ))}
             </div>
           </div>
         </div>
@@ -102,7 +102,7 @@ function Blog(props: any) {
                 <div className="col-span-12 lg:col-span-12">
                   <Tabs scrollable size="medium" onChange={setCategory} defaultActiveId={'all'}>
                     {props.categories.map((categoryId: string) => (
-                      <Tabs.Panel id={categoryId} label={categoryId}>
+                      <Tabs.Panel id={categoryId} key={categoryId} label={categoryId}>
                         {/* <p>{categoryId}</p> */}
                         <></>
                       </Tabs.Panel>
@@ -114,8 +114,11 @@ function Blog(props: any) {
 
             <ol className="grid grid-cols-12 py-16 lg:gap-16">
               {blogs.map((blog: PostTypes, idx: number) => (
-                <div className="col-span-12 md:col-span-12 lg:col-span-6 xl:col-span-4 mb-16">
-                  <BlogListItem blog={blog} key={idx} />
+                <div
+                  className="col-span-12 md:col-span-12 lg:col-span-6 xl:col-span-4 mb-16"
+                  key={idx}
+                >
+                  <BlogListItem blog={blog} />
                 </div>
               ))}
             </ol>

www/pages/blog/[year]/[month]/[day]/[slug].tsx

@@ -108,7 +108,7 @@ function BlogPostPage(props: any) {
               </div>
               <div>
                 {post.tags.map((tag: string) => {
-                  return <Badge key={`categroy-badge-${tag}`}>{tag}</Badge>
+                  return <Badge key={`category-badge-${tag}`}>{tag}</Badge>
                 })}
               </div>
             </Space>
@@ -124,8 +124,8 @@ function BlogPostPage(props: any) {
         <Space>
           {props.blog.tags.map((tag: string) => {
             return (
-              <a href={`/blog/tags/${tag}`}>
-                <Badge key={`categroy-badge-`}>{tag}</Badge>
+              <a href={`/blog/tags/${tag}`} key={`category-badge-${tag}`}>
+                <Badge>{tag}</Badge>
               </a>
             )
           })}

www/pages/database/Database.tsx

@@ -85,7 +85,7 @@ function Database() {
             'PostgreSQL is one of the worlds most scalable databases.',
           ]}
           image={[
-            <div className="w-full header--light block">
+            <div className="w-full header--light block" key="light">
               <Image
                 src={`${basePath}/images/product/database/header--light-2.png`}
                 alt="database header"
@@ -94,7 +94,7 @@ function Database() {
                 height="1116"
               />
             </div>,
-            <div className="w-full header--dark mr-0 dark:block">
+            <div className="w-full header--dark mr-0 dark:block" key="dark">
               <Image
                 src={`${basePath}/images/product/database/header--dark-2.png`}
                 alt="database header"
@@ -226,6 +226,7 @@ function Database() {
                   footer={[
                     <TweetCard
                       handle="@Elsolo244"
+                      key="@Elsolo244"
                       img_url={`${basePath}/images/twitter-profiles/v6citnk33y2wpeyzrq05_400x400.jpeg`}
                       quote="Where has
                 @supabase
@@ -242,6 +243,7 @@ function Database() {
                   footer={[
                     <TweetCard
                       handle="@jim_bisenius"
+                      key="@jim_bisenius"
                       img_url={`${basePath}/images/twitter-profiles/rLgwUZSB_400x400.jpg`}
                       quote="@MongoDB or @MySQL?!?! Please, let me introduce you to @supabase and the wonderful world of @PostgreSQL before it's too late!!"
                     />,
@@ -258,13 +260,13 @@ function Database() {
             content={ApiExamplesData}
             title="Never write an API again"
             text={[
-              <p>
+              <p key={0}>
                 We introspect your database and provide instant APIs. Focus on building your
                 product, while Supabase handles the CRUD.
               </p>,
             ]}
             footer={[
-              <div className="grid grid-cols-12">
+              <div className="grid grid-cols-12" key={0}>
                 <div className="mt-0 col-span-12 lg:col-span-6 xl:col-span-12 xl:mb-8">
                   <Space>
                     <Typography.Text type="secondary">
@@ -284,7 +286,7 @@ function Database() {
                     </Badge>
                   </Space>
                 </div>
-                <div className="col-span-12 lg:col-span-6 xl:col-span-10 hidden xl:block">
+                <div className="col-span-12 lg:col-span-6 xl:col-span-10 hidden xl:block" key={1}>
                   {/* <TweetCard
                     handle="@eunjae_lee"
                     img_url="https://pbs.twimg.com/profile_images/1188191474401320965/eGjSYbQd_400x400.jpg"

www/pages/storage/Storage.tsx

@@ -58,7 +58,7 @@ function StoragePage() {
           icon={Solutions['storage'].icon}
           title={Solutions['storage'].name}
           h1={[
-            <span>
+            <span key={0}>
               Store and serve
               <br /> any type of digital content
             </span>,
@@ -68,7 +68,7 @@ function StoragePage() {
             'With custom policies and permissions that are familiar and easy to implement.',
           ]}
           image={[
-            <div className="w-full header--light block">
+            <div className="w-full header--light block" key="light">
               <Image
                 src={`${basePath}/images/product/storage/header--light.png`}
                 alt="storage header"
@@ -77,7 +77,7 @@ function StoragePage() {
                 height="1067"
               />
             </div>,
-            <div className="w-full header--dark mr-0 dark:block">
+            <div className="w-full header--dark mr-0 dark:block" key="dark">
               <Image
                 src={`${basePath}/images/product/storage/header--dark.png`}
                 alt="storage header"
@@ -176,9 +176,12 @@ function StoragePage() {
             // @ts-ignore
             content={DashboardViewData}
             footer={[
-              <Typography.Title level={4}>Check out our example app</Typography.Title>,
+              <Typography.Title level={4} key="title">
+                Check out our example app
+              </Typography.Title>,
               // !! Update this example !!
               <ExampleCard
+                key="example"
                 type={'example'}
                 products={['database', 'auth', 'storage']}
                 title={'Profile management example'}
@@ -207,14 +210,14 @@ function StoragePage() {
             // @ts-ignore
             content={ApiExamples}
             text={[
-              <p>Built from the ground up for interoperable authentication.</p>,
-              <p>
+              <p key={0}>Built from the ground up for interoperable authentication.</p>,
+              <p key={1}>
                 Fast and easy to implement using our powerful library clients. Asset optimization
                 and image transformation coming soon!
               </p>,
             ]}
             footer={[
-              <div className="grid grid-cols-12 gap-8 lg:gap-0 xl:gap-16 my-8">
+              <div className="grid grid-cols-12 gap-8 lg:gap-0 xl:gap-16 my-8" key={0}>
                 <div className="col-span-6 lg:col-span-12 lg:mb-8 xl:mb-0 xl:col-span-4">
                   <FeatureColumn
                     icon={<IconWifi />}