Skip to content

Commit fb5c276

Browse files
dunglasdunglas
authored
feat: add support for Next 13 (#352)
1 parent b68ff74 commit fb5c276

File tree

5 files changed

+70
-67
lines changed

5 files changed

+70
-67
lines changed

‎templates/next/components/common/Pagination.tsx‎

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -22,45 +22,41 @@ const Pagination = ({ collection }: Props) => {
2222
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"
2323
aria-label="Page navigation"
2424
>
25-
<Link href={first ? first : "#"}>
26-
<a
27-
className={`text-black p-3 hover:text-cyan-500 hover:bg-cyan-50 ${
28-
previous ? "" : " text-gray-500 pointer-events-none"
29-
}`}
30-
aria-label="First page"
31-
>
32-
<span aria-hidden="true">&lArr;</span> First
33-
</a>
25+
<Link
26+
href={first ? first : "#"}
27+
className={`text-black p-3 hover:text-cyan-500 hover:bg-cyan-50 ${
28+
previous ? "" : " text-gray-500 pointer-events-none"
29+
}`}
30+
aria-label="First page"
31+
>
32+
<span aria-hidden="true">&lArr;</span> First
3433
</Link>
35-
<Link href={previous ? previous : "#"}>
36-
<a
37-
className={`text-black p-3 hover:text-cyan-500 hover:bg-cyan-50 ${
38-
previous ? "" : " text-gray-500 pointer-events-none"
39-
}`}
40-
aria-label="Previous page"
41-
>
42-
<span aria-hidden="true">&larr;</span> Previous
43-
</a>
34+
<Link
35+
href={previous ? previous : "#"}
36+
className={`text-black p-3 hover:text-cyan-500 hover:bg-cyan-50 ${
37+
previous ? "" : " text-gray-500 pointer-events-none"
38+
}`}
39+
aria-label="Previous page"
40+
>
41+
<span aria-hidden="true">&larr;</span> Previous
4442
</Link>
45-
<Link href={next ? next : "#"}>
46-
<a
47-
className={`text-black p-3 hover:text-cyan-500 hover:bg-cyan-50 ${
48-
next ? "" : " text-gray-500 pointer-events-none"
49-
}`}
50-
aria-label="Next page"
51-
>
52-
Next <span aria-hidden="true">&rarr;</span>
53-
</a>
43+
<Link
44+
href={next ? next : "#"}
45+
className={`text-black p-3 hover:text-cyan-500 hover:bg-cyan-50 ${
46+
next ? "" : " text-gray-500 pointer-events-none"
47+
}`}
48+
aria-label="Next page"
49+
>
50+
Next <span aria-hidden="true">&rarr;</span>
5451
</Link>
55-
<Link href={last ? last : "#"}>
56-
<a
57-
className={`text-black p-3 hover:text-cyan-500 hover:bg-cyan-50 ${
58-
next ? "" : "text-gray-500 pointer-events-none"
59-
}`}
60-
aria-label="Last page"
61-
>
62-
Last <span aria-hidden="true">&rArr;</span>
63-
</a>
52+
<Link
53+
href={last ? last : "#"}
54+
className={`text-black p-3 hover:text-cyan-500 hover:bg-cyan-50 ${
55+
next ? "" : "text-gray-500 pointer-events-none"
56+
}`}
57+
aria-label="Last page"
58+
>
59+
Last <span aria-hidden="true">&rArr;</span>
6460
</Link>
6561
</nav>
6662
</div>

‎templates/next/components/common/ReferenceLinks.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,11 @@ const ReferenceLinks: FunctionComponent<Props> = ({ items }) => {
1919
}
2020

2121
return (
22-
<Link href={typeof items === "string" ? items : items.href}>
23-
<a className="text-cyan-700 font-bold">
24-
{typeof items === "string" ? items : items.name}
25-
</a>
22+
<Link
23+
href={typeof items === "string" ? items : items.href}
24+
className="text-cyan-700 font-bold"
25+
>
26+
{typeof items === "string" ? items : items.name}
2627
</Link>
2728
);
2829
};

‎templates/next/components/foo/Form.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,11 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
5151

5252
return (
5353
<div className="container mx-auto px-4 max-w-2xl mt-4">
54-
<Link href="/{{{lc}}}s">
55-
<a className="text-sm text-cyan-500 font-bold hover:text-cyan-700">
56-
{`< Back to list`}
57-
</a>
54+
<Link
55+
href="/{{{lc}}}s"
56+
className="text-sm text-cyan-500 font-bold hover:text-cyan-700"
57+
>
58+
{`< Back to list`}
5859
</Link>
5960
<h1 className="text-3xl my-2">
6061
{ {{{lc}}} ? `Edit {{{ucf}}} ${ {{~lc}}['@id']}` : `Create {{{ucf}}}` }

‎templates/next/components/foo/List.tsx‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,11 @@ export const List: FunctionComponent<Props> = ({ {{{lc}}}s }) => (
1313
<div className="p-4">
1414
<div className="flex justify-between items-center">
1515
<h1 className="text-3xl mb-2">{{{ucf}}} List</h1>
16-
<Link href="/{{{lc}}}s/create">
17-
<a className="bg-cyan-500 hover:bg-cyan-700 text-white text-sm font-bold py-2 px-4 rounded">
18-
Create
19-
</a>
16+
<Link
17+
href="/{{{lc}}}s/create"
18+
className="bg-cyan-500 hover:bg-cyan-700 text-white text-sm font-bold py-2 px-4 rounded"
19+
>
20+
Create
2021
</Link>
2122
</div>
2223
<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 }) => (
5455
</td>
5556
{{/each}}
5657
<td className="w-8">
57-
<Link href={ getPath({{{lc}}}['@id'], '/{{{lc}}}s/[id]') }>
58-
<a className="text-cyan-500">
58+
<Link
59+
href={ getPath({{{lc}}}['@id'], '/{{{lc}}}s/[id]') }
60+
className="text-cyan-500"
61+
>
5962
Show
6063
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
6164
<path d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
6265
<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" />
6366
</svg>
64-
</a>
6567
</Link>
6668
</td>
6769
<td className="w-8">
68-
<Link href={ getPath({{{lc}}}["@id"], '/{{{lc}}}s/[id]/edit') }>
69-
<a className="text-cyan-500">
70-
Edit
71-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
72-
<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" />
73-
<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" />
74-
</svg>
75-
</a>
70+
<Link
71+
href={ getPath({{{lc}}}["@id"], '/{{{lc}}}s/[id]/edit') }
72+
className="text-cyan-500"
73+
>
74+
Edit
75+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
76+
<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" />
77+
<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" />
78+
</svg>
7679
</Link>
7780
</td>
7881
</tr>

‎templates/next/components/foo/Show.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,11 @@ export const Show: FunctionComponent<Props> = ({ {{{lc}}}, text }) => {
3535
<title>{`Show {{{ucf}}} ${ {{~lc}}['@id']}`}</title>
3636
<script type="application/ld+json" dangerouslySetInnerHTML={ { __html: text } } />
3737
</Head>
38-
<Link href="/{{{lc}}}s">
39-
<a className="text-sm text-cyan-500 font-bold hover:text-cyan-700">
40-
{`< Back to list`}
41-
</a>
38+
<Link
39+
href="/{{{lc}}}s"
40+
className="text-sm text-cyan-500 font-bold hover:text-cyan-700"
41+
>
42+
{"< Back to list"}
4243
</Link>
4344
<h1 className="text-3xl mb-2">{`Show {{{ucf}}} ${ {{~lc}}['@id']}`}</h1>
4445
<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 }) => {
7778
</div>
7879
)}
7980
<div className="flex space-x-2 mt-4 items-center justify-end">
80-
<Link href={getPath({{{lc}}}["@id"], '/{{{lc}}}s/[id]/edit')}>
81-
<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">
82-
Edit
83-
</a>
81+
<Link
82+
href={getPath({{{lc}}}["@id"], "/{{{lc}}}s/[id]/edit")}
83+
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"
84+
>
85+
Edit
8486
</Link>
8587
<button
8688
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"

0 commit comments

Comments
 (0)