Skip to content

fix: homepage - use Link for internal links #1001

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

fix: homepage - use Link for internal links #1001

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 16 additions & 12 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,9 +183,11 @@ const HeroSection: FC = () => {
</Tooltip>
<div className="justify-center sm:flex sm:justify-start">
<div className="mx-0 flex flex-row items-center gap-4 sm:gap-6">
<Button href="/docs/getting-started/introduction" size="lg" className="w-full whitespace-nowrap">
Get started <HiOutlineArrowRight className="ml-2 mt-1 h-4 w-4" />
</Button>
<Link href="/docs/getting-started/introduction" tabIndex={-1}>
Copy link
Collaborator

@rluders rluders Sep 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SutuSebastian probably here we want to use <Button as={Link} ...>

Copy link
Collaborator Author

@SutuSebastian SutuSebastian Sep 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already discussed in Discord in the react-library, TS throws errors when doing that, it does not properly infer & extend the Link component from NextJS. That is the reason I made it like this.

Do u think we should fix the underlying issue with TS first? Luckily this is the only place href prop is used that is visible to the user.

Copy link
Collaborator Author

@SutuSebastian SutuSebastian Sep 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2023-09-26 at 19 35 30

Copy link
Collaborator

@rluders rluders Sep 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As we discussed, I think that we should first fix the button. I'm converting this PR to draft till we get the fix.

Copy link
Collaborator

@nigellima nigellima Jan 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#1244 should fix this now @SutuSebastian @rluders

Copy link
Collaborator Author

@SutuSebastian SutuSebastian Jan 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will push the fixes in #1246.

<Button size="lg" className="w-full whitespace-nowrap">
Get started <HiOutlineArrowRight className="ml-2 mt-1 h-4 w-4" />
</Button>
</Link>
</div>
</div>
</div>
Expand Down Expand Up @@ -371,9 +373,9 @@ const ComponentsSection: FC = () => {
))}
</div>
<div className="mb-4 flex w-full justify-center text-center">
<Button href="/docs/components/accordion" color="light">
View all components
</Button>
<Link href="/docs/components/accordion" tabIndex={-1}>
<Button color="light">View all components</Button>
</Link>
</div>
</div>
</section>
Expand Down Expand Up @@ -447,12 +449,14 @@ const ReactSection: FC = () => {
))}
</ul>
<div className="flex flex-row gap-4">
<Button href="/docs/getting-started/quickstart">
Start building <HiOutlineArrowRight className="ml-2 h-5 w-5" />
</Button>
<Button href="https://github.com/themesberg/flowbite-react" color="gray">
View on GitHub
</Button>
<Link href="/docs/getting-started/quickstart" tabIndex={-1}>
<Button>
Start building <HiOutlineArrowRight className="ml-2 h-5 w-5" />
</Button>
</Link>
<Link href="https://github.com/themesberg/flowbite-react" tabIndex={-1}>
<Button color="gray">View on GitHub</Button>
</Link>
</div>
</div>
</div>
Expand Down