Skip to content

Commit c5ffba4

Browse files
arghyaxcodesarghyaxcodes
committed
Refactor link components to remove unnecessary code duplication
1 parent 6330c9e commit c5ffba4

13 files changed

Lines changed: 263 additions & 262 deletions

File tree

‎src/components/Button.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import Link from 'next/link'
22

33
export function Button({ children, ...props }) {
44
return (
5-
<Link {...props}>
6-
<a className="focus:outline-none inline-flex items-center rounded-lg bg-gray-800 px-6 py-3 text-lg font-medium text-white no-underline shadow hover:bg-gray-700 focus:bg-gray-700">
7-
{children}
8-
<svg viewBox="0 0 24 24" className="ml-2 h-4 w-4 fill-current text-gray-300">
9-
<path d="M18.59 13H3a1 1 0 0 1 0-2h15.59l-5.3-5.3a1 1 0 1 1 1.42-1.4l7 7a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.42-1.4l5.3-5.3z" />
10-
</svg>
11-
</a>
5+
<Link
6+
{...props}
7+
className="focus:outline-none inline-flex items-center rounded-lg bg-gray-800 px-6 py-3 text-lg font-medium text-white no-underline shadow hover:bg-gray-700 focus:bg-gray-700"
8+
>
9+
{children}
10+
<svg viewBox="0 0 24 24" className="ml-2 h-4 w-4 fill-current text-gray-300">
11+
<path d="M18.59 13H3a1 1 0 0 1 0-2h15.59l-5.3-5.3a1 1 0 1 1 1.42-1.4l7 7a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.42-1.4l5.3-5.3z" />
12+
</svg>
1213
</Link>
1314
)
1415
}

‎src/components/Header.js‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,16 @@ export function Header({ navIsOpen, onNavToggle }) {
1111
<>
1212
<div className="sticky top-0 z-40 mx-auto flex w-full max-w-8xl flex-none border-b border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900 lg:z-50">
1313
<div className="flex flex-none items-center border-b border-gray-200 pl-4 dark:border-gray-700 sm:pl-6 lg:w-60 lg:border-b-0 xl:w-72 xl:pl-8">
14-
<Link href="/">
15-
<a
16-
className="w-10 overflow-hidden md:w-auto"
17-
onContextMenu={(e) => {
18-
e.preventDefault()
19-
Router.push('/brand')
20-
}}
21-
>
22-
<span className="sr-only">Javaistic home page</span>
23-
<Logo className="h-10 w-auto text-black dark:text-white" />
24-
</a>
14+
<Link
15+
href="/"
16+
className="w-10 overflow-hidden md:w-auto"
17+
onContextMenu={(e) => {
18+
e.preventDefault()
19+
Router.push('/brand')
20+
}}
21+
>
22+
<span className="sr-only">Javaistic home page</span>
23+
<Logo className="h-10 w-auto text-black dark:text-white" />
2524
</Link>
2625
</div>
2726
<div className="flex h-18 flex-auto items-center justify-between px-4 sm:px-6 lg:mx-6 lg:px-0 xl:mx-8">

‎src/components/IntegrationGuides.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@ export function IntegrationGuides() {
1515
{guides.map((guide) => {
1616
const Logo = guide.logo
1717
return (
18-
<Link href={guide.link} key={guide.name}>
19-
<a className="flex flex-col items-center rounded-xl py-4 shadow-sm ring-1 ring-black ring-opacity-5">
20-
<Logo className="h-12 w-auto" />
21-
<div className="mt-3 text-sm font-semibold text-gray-900 sm:mt-2">{guide.name}</div>
22-
</a>
18+
<Link
19+
href={guide.link}
20+
key={guide.name}
21+
className="flex flex-col items-center rounded-xl py-4 shadow-sm ring-1 ring-black ring-opacity-5"
22+
>
23+
<Logo className="h-12 w-auto" />
24+
<div className="mt-3 text-sm font-semibold text-gray-900 sm:mt-2">{guide.name}</div>
2325
</Link>
2426
)
2527
})}

‎src/components/Search.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,7 @@ const ACTION_KEY_DEFAULT = ['Ctrl ', 'Control']
1010
const ACTION_KEY_APPLE = ['⌘', 'Command']
1111

1212
function Hit({ hit, children }) {
13-
return (
14-
<Link href={hit.url}>
15-
<a>{children}</a>
16-
</Link>
17-
)
13+
return <Link href={hit.url}>{children}</Link>
1814
}
1915

2016
export function Search() {

‎src/components/home/BackToTopButton.js‎

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,40 @@
1-
import React from 'react';
2-
import { useEffect, useState } from 'react';
1+
import React from 'react'
2+
import { useEffect, useState } from 'react'
33
import { ArrowUpIcon } from '@heroicons/react/outline'
44

55
function BackToTopButton() {
6-
const [backToTopButton, setBackToTopButton] = useState(false);
6+
const [backToTopButton, setBackToTopButton] = useState(false)
77

8-
useEffect(() =>{
9-
window.addEventListener("scroll", () => {
10-
if(window.scrollY > 100){
11-
setBackToTopButton(true)
12-
} else{
13-
setBackToTopButton(false)
14-
}
15-
})
16-
}, [])
8+
useEffect(() => {
9+
window.addEventListener('scroll', () => {
10+
if (window.scrollY > 100) {
11+
setBackToTopButton(true)
12+
} else {
13+
setBackToTopButton(false)
14+
}
15+
})
16+
}, [])
1717

18-
const scrollUp = () => {
19-
window.scrollTo({
20-
top: 0,
21-
behavior: "smooth"
22-
})
23-
}
18+
const scrollUp = () => {
19+
window.scrollTo({
20+
top: 0,
21+
behavior: 'smooth',
22+
})
23+
}
2424

25-
return (
26-
<div>
27-
{backToTopButton && (
28-
29-
<button onClick={scrollUp} className ="fixed bottom-12 right-12 w-12 h-12 text-5xl text-white bg-sky-500 rounded-full flex items-center justify-center hover:shadow-xl hover:ring-2 hover:ring-rose-500 hover:ring-offset-2 focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:bg-gray-700" > <ArrowUpIcon className="h-8 w-8" /> </button>
30-
31-
32-
)}
33-
34-
35-
</div>
36-
)
25+
return (
26+
<div>
27+
{backToTopButton && (
28+
<button
29+
onClick={scrollUp}
30+
className="fixed bottom-12 right-12 flex h-12 w-12 items-center justify-center rounded-full bg-sky-500 text-5xl text-white hover:shadow-xl hover:ring-2 hover:ring-rose-500 hover:ring-offset-2 focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:bg-gray-700"
31+
>
32+
{' '}
33+
<ArrowUpIcon className="h-8 w-8" />{' '}
34+
</button>
35+
)}
36+
</div>
37+
)
3738
}
3839

39-
export default BackToTopButton;
40+
export default BackToTopButton

‎src/components/home/Footer.js‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,11 @@ export function Footer() {
6060
<ul className="space-y-4">
6161
{footerNav[section].items.map((item) => (
6262
<li key={item.title}>
63-
<Link href={item.href}>
64-
<a className="text-base text-gray-500 transition duration-200 ease-in-out hover:font-semibold hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
65-
{item.title}
66-
</a>
63+
<Link
64+
href={item.href}
65+
className="text-base text-gray-500 transition duration-200 ease-in-out hover:font-semibold hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
66+
>
67+
{item.title}
6768
</Link>
6869
</li>
6970
))}
@@ -128,24 +129,26 @@ export function Footer() {
128129
</div>
129130
<div className="flex items-center">
130131
<a
131-
href="#"
132+
href="/privacy"
132133
className="title-font flex items-center justify-center pl-6 font-medium text-gray-900 md:justify-start"
133134
>
134135
<p className="mt-2 text-sm text-gray-500">Privacy Policy</p>
135136
</a>
136-
<Link href="/terms-and-conditions">
137-
<a className="title-font flex items-center justify-center pl-6 font-medium md:justify-start">
138-
<p className="mt-2 text-sm text-gray-500 hover:text-black dark:hover:text-white">
139-
Terms &amp; Conditions
140-
</p>
141-
</a>
137+
<Link
138+
href="/terms"
139+
className="title-font flex items-center justify-center pl-6 font-medium md:justify-start"
140+
>
141+
<p className="mt-2 text-sm text-gray-500 hover:text-black dark:hover:text-white">
142+
Terms &amp; Conditions
143+
</p>
142144
</Link>
143-
<Link href="/status">
144-
<a className="title-font flex items-center justify-center pl-6 font-medium text-gray-900 md:justify-start">
145-
<p className="mt-2 text-sm text-gray-500 hover:text-black dark:hover:text-white">
146-
Status
147-
</p>
148-
</a>
145+
<Link
146+
href="/status"
147+
className="title-font flex items-center justify-center pl-6 font-medium text-gray-900 md:justify-start"
148+
>
149+
<p className="mt-2 text-sm text-gray-500 hover:text-black dark:hover:text-white">
150+
Status
151+
</p>
149152
</Link>
150153
</div>
151154
<div className="mt-4 inline-flex justify-center sm:ml-auto sm:mt-0 sm:justify-start">

0 commit comments

Comments
 (0)