feat: add support for Next 13 (#352)

api-platform · Dec 21, 2022 · fb5c276 · fb5c276
1 parent b68ff74
commit fb5c276
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 67 deletions.
diff --git a/templates/next/components/common/Pagination.tsx b/templates/next/components/common/Pagination.tsx
@@ -22,45 +22,41 @@ const Pagination = ({ collection }: Props) => {
         className="text-xs font-bold inline-flex mx-auto divide-x-2 divide-gray-200 flex-row flex-wrap items-center justify-center mb-4 border-2 border-gray-200 rounded-2xl overflow-hidden"
         aria-label="Page navigation"
       >
-        <Link href={first ? first : "#"}>
-          <a
-            className={`text-black p-3 hover:text-cyan-500 hover:bg-cyan-50 ${
-              previous ? "" : " text-gray-500 pointer-events-none"
-            }`}
-            aria-label="First page"
-          >
-            <span aria-hidden="true">&lArr;</span> First
-          </a>
+        <Link
+          href={first ? first : "#"}
+          className={`text-black p-3 hover:text-cyan-500 hover:bg-cyan-50 ${
+            previous ? "" : " text-gray-500 pointer-events-none"
+          }`}
+          aria-label="First page"
+        >
+          <span aria-hidden="true">&lArr;</span> First
         </Link>
-        <Link href={previous ? previous : "#"}>
-          <a
-            className={`text-black p-3 hover:text-cyan-500 hover:bg-cyan-50 ${
-              previous ? "" : " text-gray-500 pointer-events-none"
-            }`}
-            aria-label="Previous page"
-          >
-            <span aria-hidden="true">&larr;</span> Previous
-          </a>
+        <Link
+          href={previous ? previous : "#"}
+          className={`text-black p-3 hover:text-cyan-500 hover:bg-cyan-50 ${
+            previous ? "" : " text-gray-500 pointer-events-none"
+          }`}
+          aria-label="Previous page"
+        >
+          <span aria-hidden="true">&larr;</span> Previous
         </Link>
-        <Link href={next ? next : "#"}>
-          <a
-            className={`text-black p-3 hover:text-cyan-500 hover:bg-cyan-50 ${
-              next ? "" : " text-gray-500 pointer-events-none"
-            }`}
-            aria-label="Next page"
-          >
-            Next <span aria-hidden="true">&rarr;</span>
-          </a>
+        <Link
+          href={next ? next : "#"}
+          className={`text-black p-3 hover:text-cyan-500 hover:bg-cyan-50 ${
+            next ? "" : " text-gray-500 pointer-events-none"
+          }`}
+          aria-label="Next page"
+        >
+          Next <span aria-hidden="true">&rarr;</span>
         </Link>
-        <Link href={last ? last : "#"}>
-          <a
-            className={`text-black p-3 hover:text-cyan-500 hover:bg-cyan-50 ${
-              next ? "" : "text-gray-500 pointer-events-none"
-            }`}
-            aria-label="Last page"
-          >
-            Last <span aria-hidden="true">&rArr;</span>
-          </a>
+        <Link
+          href={last ? last : "#"}
+          className={`text-black p-3 hover:text-cyan-500 hover:bg-cyan-50 ${
+            next ? "" : "text-gray-500 pointer-events-none"
+          }`}
+          aria-label="Last page"
+        >
+          Last <span aria-hidden="true">&rArr;</span>
         </Link>
       </nav>
     </div>

diff --git a/templates/next/components/common/ReferenceLinks.tsx b/templates/next/components/common/ReferenceLinks.tsx
@@ -19,10 +19,11 @@ const ReferenceLinks: FunctionComponent<Props> = ({ items }) => {
   }
 
   return (
-    <Link href={typeof items === "string" ? items : items.href}>
-      <a className="text-cyan-700 font-bold">
-        {typeof items === "string" ? items : items.name}
-      </a>
+    <Link
+      href={typeof items === "string" ? items : items.href}
+      className="text-cyan-700 font-bold"
+    >
+      {typeof items === "string" ? items : items.name}
     </Link>
   );
 };

diff --git a/templates/next/components/foo/Form.tsx b/templates/next/components/foo/Form.tsx
@@ -51,10 +51,11 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
 
 	return (
     <div className="container mx-auto px-4 max-w-2xl mt-4">
-      <Link href="/{{{lc}}}s">
-        <a className="text-sm text-cyan-500 font-bold hover:text-cyan-700">
-          {`< Back to list`}
-        </a>
+      <Link
+        href="/{{{lc}}}s"
+        className="text-sm text-cyan-500 font-bold hover:text-cyan-700"
+      >
+        {`< Back to list`}
       </Link>
       <h1 className="text-3xl my-2">
         { {{{lc}}} ? `Edit {{{ucf}}} ${ {{~lc}}['@id']}` : `Create {{{ucf}}}` }

diff --git a/templates/next/components/foo/List.tsx b/templates/next/components/foo/List.tsx
@@ -13,10 +13,11 @@ export const List: FunctionComponent<Props> = ({ {{{lc}}}s }) => (
   <div className="p-4">
     <div className="flex justify-between items-center">
       <h1 className="text-3xl mb-2">{{{ucf}}} List</h1>
-      <Link href="/{{{lc}}}s/create">
-        <a className="bg-cyan-500 hover:bg-cyan-700 text-white text-sm font-bold py-2 px-4 rounded">
-          Create
-        </a>
+      <Link
+        href="/{{{lc}}}s/create"
+        className="bg-cyan-500 hover:bg-cyan-700 text-white text-sm font-bold py-2 px-4 rounded"
+      >
+        Create
       </Link>
     </div>
     <table cellPadding={10} className="shadow-md table border-collapse min-w-full leading-normal table-auto text-left my-3">
@@ -54,25 +55,27 @@ export const List: FunctionComponent<Props> = ({ {{{lc}}}s }) => (
               </td>
             {{/each}}
             <td className="w-8">
-              <Link href={ getPath({{{lc}}}['@id'], '/{{{lc}}}s/[id]') }>
-               <a className="text-cyan-500">
+              <Link
+                href={ getPath({{{lc}}}['@id'], '/{{{lc}}}s/[id]') }
+                className="text-cyan-500"
+              >
                 Show
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
                   <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
                   <path fillRule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z" clipRule="evenodd" />
                 </svg>
-                </a>
               </Link>
             </td>
             <td className="w-8">
-              <Link href={ getPath({{{lc}}}["@id"], '/{{{lc}}}s/[id]/edit') }>
-                <a className="text-cyan-500">
-                  Edit
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
-                    <path d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32l8.4-8.4z" />
-                    <path d="M5.25 5.25a3 3 0 00-3 3v10.5a3 3 0 003 3h10.5a3 3 0 003-3V13.5a.75.75 0 00-1.5 0v5.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5V8.25a1.5 1.5 0 011.5-1.5h5.25a.75.75 0 000-1.5H5.25z" />
-                  </svg>
-                </a>
+              <Link
+                href={ getPath({{{lc}}}["@id"], '/{{{lc}}}s/[id]/edit') }
+                className="text-cyan-500"
+              >
+                Edit
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+                  <path d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32l8.4-8.4z" />
+                  <path d="M5.25 5.25a3 3 0 00-3 3v10.5a3 3 0 003 3h10.5a3 3 0 003-3V13.5a.75.75 0 00-1.5 0v5.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5V8.25a1.5 1.5 0 011.5-1.5h5.25a.75.75 0 000-1.5H5.25z" />
+                </svg>
               </Link>
             </td>
           </tr>

diff --git a/templates/next/components/foo/Show.tsx b/templates/next/components/foo/Show.tsx
@@ -35,10 +35,11 @@ export const Show: FunctionComponent<Props> = ({ {{{lc}}}, text }) => {
         <title>{`Show {{{ucf}}} ${ {{~lc}}['@id']}`}</title>
         <script type="application/ld+json" dangerouslySetInnerHTML={ { __html: text } } />
       </Head>
-      <Link href="/{{{lc}}}s">
-        <a className="text-sm text-cyan-500 font-bold hover:text-cyan-700">
-          {`< Back to list`}
-        </a>
+      <Link
+        href="/{{{lc}}}s"
+        className="text-sm text-cyan-500 font-bold hover:text-cyan-700"
+      >
+        {"< Back to list"}
       </Link>
       <h1 className="text-3xl mb-2">{`Show {{{ucf}}} ${ {{~lc}}['@id']}`}</h1>
       <table cellPadding={10} className="shadow-md table border-collapse min-w-full leading-normal table-auto text-left my-3">
@@ -77,10 +78,11 @@ export const Show: FunctionComponent<Props> = ({ {{{lc}}}, text }) => {
         </div>
       )}
       <div className="flex space-x-2 mt-4 items-center justify-end">
-        <Link href={getPath({{{lc}}}["@id"], '/{{{lc}}}s/[id]/edit')}>
-          <a className="inline-block mt-2 border-2 border-cyan-500 bg-cyan-500 hover:border-cyan-700 hover:bg-cyan-700 text-xs text-white font-bold py-2 px-4 rounded">
-            Edit
-          </a>
+        <Link
+          href={getPath({{{lc}}}["@id"], "/{{{lc}}}s/[id]/edit")}
+          className="inline-block mt-2 border-2 border-cyan-500 bg-cyan-500 hover:border-cyan-700 hover:bg-cyan-700 text-xs text-white font-bold py-2 px-4 rounded"
+        >
+          Edit
         </Link>
         <button
           className="inline-block mt-2 border-2 border-red-400 hover:border-red-700 hover:text-red-700 text-xs text-red-400 font-bold py-2 px-4 rounded"