Skip to content

Commit 292fe9c

Browse files
committed
fix: remove <a> from <Link>, add prettier dev dep
1 parent 651add4 commit 292fe9c

File tree

21 files changed

+189
-222
lines changed

21 files changed

+189
-222
lines changed

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"eslint": "8.10.0",
5555
"eslint-config-next": "^13.4.5",
5656
"postcss": "^8.4.8",
57+
"prettier": "^2.8.8",
5758
"tailwindcss": "^3.0.23",
5859
"typescript": "4.6.2"
5960
}

src/modules/account/components/account-nav/index.tsx

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,9 @@ const AccountNav = () => {
1212
<div>
1313
<div className="small:hidden">
1414
{route !== "/account" && (
15-
<Link href="/account">
16-
<a className="flex items-center gap-x-2 text-small-regular py-2">
17-
<ChevronDown className="transform rotate-90" />
18-
<span>Account</span>
19-
</a>
15+
<Link href="/account" className="flex items-center gap-x-2 text-small-regular py-2">
16+
<ChevronDown className="transform rotate-90" />
17+
<span>Account</span>
2018
</Link>
2119
)}
2220
</div>
@@ -69,14 +67,10 @@ type AccountNavLinkProps = {
6967
const AccountNavLink = ({ href, route, children }: AccountNavLinkProps) => {
7068
const active = route === href
7169
return (
72-
<Link href={href}>
73-
<a
74-
className={clsx("text-gray-700", {
75-
"text-gray-900 font-semibold": active,
76-
})}
77-
>
78-
{children}
79-
</a>
70+
<Link href={href} className={clsx("text-gray-700", {
71+
"text-gray-900 font-semibold": active,
72+
})}>
73+
{children}
8074
</Link>
8175
)
8276
}

src/modules/account/components/order-card/index.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,7 @@ const OrderCard = ({ order }: OrderCardProps) => {
6666
</div>
6767
<div className="flex justify-end">
6868
<Link href={`/order/details/${order.id}`}>
69-
<a>
70-
<Button variant="secondary">See details</Button>
71-
</a>
69+
<Button variant="secondary">See details</Button>
7270
</Link>
7371
</div>
7472
</div>

src/modules/account/components/overview/index.tsx

Lines changed: 36 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -21,36 +21,33 @@ const Overview = ({ orders, customer }: OverviewProps) => {
2121
<div className="text-base-regular">
2222
<ul>
2323
<li>
24-
<Link href="/account/profile">
25-
<a className="flex items-center justify-between py-4 border-b border-gray-200 px-8">
26-
<div className="flex items-center gap-x-2">
27-
<User size={16} />
28-
<span>Profile</span>
29-
</div>
30-
<ChevronDown className="transform -rotate-90" />
31-
</a>
24+
<Link href="/account/profile"
25+
className="flex items-center justify-between py-4 border-b border-gray-200 px-8">
26+
<div className="flex items-center gap-x-2">
27+
<User size={16} />
28+
<span>Profile</span>
29+
</div>
30+
<ChevronDown className="transform -rotate-90" />
3231
</Link>
3332
</li>
3433
<li>
35-
<Link href="/account/addresses">
36-
<a className="flex items-center justify-between py-4 border-b border-gray-200 px-8">
37-
<div className="flex items-center gap-x-2">
38-
<MapPin size={16} />
39-
<span>Addresses</span>
40-
</div>
41-
<ChevronDown className="transform -rotate-90" />
42-
</a>
34+
<Link href="/account/addresses"
35+
className="flex items-center justify-between py-4 border-b border-gray-200 px-8">
36+
<div className="flex items-center gap-x-2">
37+
<MapPin size={16} />
38+
<span>Addresses</span>
39+
</div>
40+
<ChevronDown className="transform -rotate-90" />
4341
</Link>
4442
</li>
4543
<li>
46-
<Link href="/account/orders">
47-
<a className="flex items-center justify-between py-4 border-b border-gray-200 px-8">
48-
<div className="flex items-center gap-x-2">
49-
<Package size={16} />
50-
<span>Orders</span>
51-
</div>
52-
<ChevronDown className="transform -rotate-90" />
53-
</a>
44+
<Link href="/account/orders"
45+
className="flex items-center justify-between py-4 border-b border-gray-200 px-8">
46+
<div className="flex items-center gap-x-2">
47+
<Package size={16} />
48+
<span>Orders</span>
49+
</div>
50+
<ChevronDown className="transform -rotate-90" />
5451
</Link>
5552
</li>
5653
</ul>
@@ -103,41 +100,39 @@ const Overview = ({ orders, customer }: OverviewProps) => {
103100
return (
104101
<li key={order.id}>
105102
<Link href={`/order/details/${order.id}`}>
106-
<a>
107-
<div className="bg-gray-50 flex justify-between items-center p-4">
108-
<div className="grid grid-cols-3 grid-rows-2 text-small-regular gap-x-4 flex-1">
103+
<div className="bg-gray-50 flex justify-between items-center p-4">
104+
<div className="grid grid-cols-3 grid-rows-2 text-small-regular gap-x-4 flex-1">
109105
<span className="font-semibold">
110106
Date placed
111107
</span>
112-
<span className="font-semibold">
108+
<span className="font-semibold">
113109
Order number
114110
</span>
115-
<span className="font-semibold">
111+
<span className="font-semibold">
116112
Total amount
117113
</span>
118-
<span>
114+
<span>
119115
{new Date(order.created_at).toDateString()}
120116
</span>
121-
<span>#{order.display_id}</span>
122-
<span>
117+
<span>#{order.display_id}</span>
118+
<span>
123119
{formatAmount({
124120
amount: order.total,
125121
region: order.region,
126122
includeTaxes: false,
127123
})}
128124
</span>
129-
</div>
130-
<button
131-
className="flex items-center justify-between"
132-
onClick={close}
133-
>
125+
</div>
126+
<button
127+
className="flex items-center justify-between"
128+
onClick={close}
129+
>
134130
<span className="sr-only">
135131
Go to order #{order.display_id}
136132
</span>
137-
<ChevronDown className="-rotate-90" />
138-
</button>
139-
</div>
140-
</a>
133+
<ChevronDown className="-rotate-90" />
134+
</button>
135+
</div>
141136
</Link>
142137
</li>
143138
)

src/modules/account/components/register/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,12 +99,12 @@ const Register = () => {
9999
)}
100100
<span className="text-center text-gray-700 text-small-regular mt-6">
101101
By creating an account, you agree to Acme&apos;s{" "}
102-
<Link href="/content/privacy-policy">
103-
<a className="underline">Privacy Policy</a>
102+
<Link href="/content/privacy-policy" className="underline">
103+
Privacy Policy
104104
</Link>{" "}
105105
and{" "}
106-
<Link href="/content/terms-of-use">
107-
<a className="underline">Terms of Use</a>
106+
<Link href="/content/terms-of-use" className="underline">
107+
Terms of Use
108108
</Link>
109109
.
110110
</span>

src/modules/cart/components/sign-in-prompt/index.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ const SignInPrompt = () => {
1212
</div>
1313
<div>
1414
<Link href="/account/login">
15-
<a>
16-
<Button variant="secondary">Sign in</Button>
17-
</a>
15+
<Button variant="secondary">Sign in</Button>
1816
</Link>
1917
</div>
2018
</div>

src/modules/cart/templates/summary.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ const Summary = ({ cart }: SummaryProps) => {
1212
<div className="grid grid-cols-1 gap-y-6">
1313
<CartTotals cart={cart} />
1414
<Link href="/checkout">
15-
<a>
16-
<Button>Go to checkout</Button>
17-
</a>
15+
<Button>Go to checkout</Button>
1816
</Link>
1917
</div>
2018
)

src/modules/checkout/templates/index.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,16 @@ const CheckoutTemplate = () => {
1212
<div className="bg-gray-100 relative small:min-h-screen">
1313
<div className="h-16 bg-white">
1414
<nav className="flex items-center h-full justify-between content-container">
15-
<Link href="/cart">
16-
<a className="text-small-semi text-gray-700 flex items-center gap-x-2 uppercase flex-1 basis-0">
17-
<ChevronDown className="rotate-90" size={16} />
18-
<span className="mt-px hidden small:block">
15+
<Link href="/cart"
16+
className="text-small-semi text-gray-700 flex items-center gap-x-2 uppercase flex-1 basis-0">
17+
<ChevronDown className="rotate-90" size={16} />
18+
<span className="mt-px hidden small:block">
1919
Back to shopping cart
2020
</span>
21-
<span className="mt-px block small:hidden">Back</span>
22-
</a>
21+
<span className="mt-px block small:hidden">Back</span>
2322
</Link>
24-
<Link href="/">
25-
<a className="text-xl-semi">ACME</a>
23+
<Link href="/" className="text-xl-semi">
24+
ACME
2625
</Link>
2726
<div className="flex-1 basis-0" />
2827
</nav>

src/modules/common/components/underline-link/index.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,13 @@ type UnderlineLinkProps = {
99
const UnderlineLink = ({ href, children }: UnderlineLinkProps) => {
1010
return (
1111
<div className="flex items-start">
12-
<Link href={href}>
13-
<a className="flex items-center text-large-regular border-b border-current gap-x-4 py-2 transition-all duration-300 group hover:pl-4 hover:pr-1">
14-
<span>{children}</span>
15-
<ArrowRight
16-
size={20}
17-
className="transition-all group-hover:ml-2 duration-300"
18-
/>
19-
</a>
12+
<Link href={href}
13+
className="flex items-center text-large-regular border-b border-current gap-x-4 py-2 transition-all duration-300 group hover:pl-4 hover:pr-1">
14+
<span>{children}</span>
15+
<ArrowRight
16+
size={20}
17+
className="transition-all group-hover:ml-2 duration-300"
18+
/>
2019
</Link>
2120
</div>
2221
)

src/modules/layout/components/cart-dropdown/index.tsx

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,12 @@ const CartDropdown = () => {
5959
<div className="flex flex-col flex-1">
6060
<div className="flex items-start justify-between">
6161
<div>
62-
<h3 className="text-base-regular overflow-ellipsis overflow-hidden whitespace-nowrap mr-4 w-[130px]">
62+
<h3
63+
className="text-base-regular overflow-ellipsis overflow-hidden whitespace-nowrap mr-4 w-[130px]">
6364
<Link
6465
href={`/products/${item.variant.product.handle}`}
6566
>
66-
<a>{item.title}</a>
67+
{item.title}
6768
</Link>
6869
</h3>
6970
<LineItemOptions variant={item.variant} />
@@ -108,25 +109,22 @@ const CartDropdown = () => {
108109
</span>
109110
</div>
110111
<Link href="/cart" passHref>
111-
<a>
112-
<Button>Go to bag</Button>
113-
</a>
112+
<Button>Go to bag</Button>
114113
</Link>
115114
</div>
116115
</>
117116
) : (
118117
<div>
119118
<div className="flex py-16 flex-col gap-y-4 items-center justify-center">
120-
<div className="bg-gray-900 text-small-regular flex items-center justify-center w-6 h-6 rounded-full text-white">
119+
<div
120+
className="bg-gray-900 text-small-regular flex items-center justify-center w-6 h-6 rounded-full text-white">
121121
<span>0</span>
122122
</div>
123123
<span>Your shopping bag is empty.</span>
124124
<div>
125125
<Link href="/store">
126-
<a>
127-
<span className="sr-only">Go to all products page</span>
128-
<Button onClick={close}>Explore products</Button>
129-
</a>
126+
<span className="sr-only">Go to all products page</span>
127+
<Button onClick={close}>Explore products</Button>
130128
</Link>
131129
</div>
132130
</div>

0 commit comments

Comments
 (0)