From 4a8090e27e12b30ab4af3b4287afe30b070d2a9b Mon Sep 17 00:00:00 2001 From: Tim Vucina Date: Wed, 15 May 2024 21:22:09 +0200 Subject: [PATCH] feat: layout + responsivenes improvements + custom scroll hook --- package.json | 2 +- pnpm-lock.yaml | 22 +++++----- src/app/[locale]/page.tsx | 44 +++++++++++++------ src/components/common/navbar.tsx | 29 ++++++++++++ src/components/examples/sentry-example.tsx | 6 +++ src/components/examples/toast-example.tsx | 1 + .../examples/zodios-client-example.tsx | 5 ++- .../examples/zodios-server-example.tsx | 2 +- src/components/ui/background-beams.tsx | 1 + src/lib/hooks/use-scroll-callback.ts | 31 +++++++++++++ 10 files changed, 115 insertions(+), 28 deletions(-) create mode 100644 src/components/common/navbar.tsx create mode 100644 src/lib/hooks/use-scroll-callback.ts diff --git a/package.json b/package.json index 87f8727..417f4cb 100644 --- a/package.json +++ b/package.json @@ -40,12 +40,12 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.51.4", + "react-icons": "^5.2.1", "react-markdown": "^9.0.1", "remark-gfm": "^4.0.0", "sonner": "^1.4.41", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7", - "tailwindcss/typography": "^3.1.0", "zod": "^3.23.8" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fbc705c..2108427 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -77,6 +77,9 @@ dependencies: react-hook-form: specifier: ^7.51.4 version: 7.51.4(react@18.3.1) + react-icons: + specifier: ^5.2.1 + version: 5.2.1(react@18.3.1) react-markdown: specifier: ^9.0.1 version: 9.0.1(@types/react@18.3.2)(react@18.3.1) @@ -92,9 +95,6 @@ dependencies: tailwindcss-animate: specifier: ^1.0.7 version: 1.0.7(tailwindcss@3.4.3) - tailwindcss-typography: - specifier: ^3.1.0 - version: 3.1.0 zod: specifier: ^3.23.8 version: 3.23.8 @@ -5952,6 +5952,7 @@ packages: /lodash@4.17.21: resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} + dev: true /log-update@6.0.0: resolution: {integrity: sha512-niTvB4gqvtof056rRIrTZvjNYE4rCUzO6X/X+kYjd7WFxXeJ0NwEFnRxX6ehkvv3jTwrXnNdtAak5XYZuIyPFw==} @@ -7181,6 +7182,14 @@ packages: react: 18.3.1 dev: false + /react-icons@5.2.1(react@18.3.1): + resolution: {integrity: sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==} + peerDependencies: + react: '*' + dependencies: + react: 18.3.1 + dev: false + /react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -7863,13 +7872,6 @@ packages: tailwindcss: 3.4.3(ts-node@10.9.2) dev: false - /tailwindcss-typography@3.1.0: - resolution: {integrity: sha512-uqovHMt9orPs1kl2U+bidlcO25tmUGJjjluQdI67yRnOy/IlqKe6tYcHHAsQPhehlk3r11/T3CE7Uc0PSUJcNg==} - deprecated: Use @tailwindcss/typography - dependencies: - lodash: 4.17.21 - dev: false - /tailwindcss@3.4.3(ts-node@10.9.2): resolution: {integrity: sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==} engines: {node: '>=14.0.0'} diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx index cbe3678..2304c9f 100644 --- a/src/app/[locale]/page.tsx +++ b/src/app/[locale]/page.tsx @@ -1,5 +1,6 @@ /* eslint-disable react/jsx-no-literals */ import LanguageSwitcher from '@/components/common/language-switcher'; +import Navbar from '@/components/common/navbar'; import ThemeToggle from '@/components/common/theme-toggle'; import ExampleCard from '@/components/examples/example-card'; import { FormExample } from '@/components/examples/form-example'; @@ -11,6 +12,7 @@ import { BackgroundBeams } from '@/components/ui/background-beams'; import env from '@/env'; import { getScopedI18n } from '@/i18n/server'; import path from 'path'; +import { FaGithub } from 'react-icons/fa'; import Markdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import readme from '../../../docs/README.md'; @@ -19,19 +21,29 @@ export default async function Home() { const t = await getScopedI18n('home'); return ( -
+
-
- - -
-
-
-
+ + + + +
+ + +
+ + +
+
+

{t('title')}

{t('subtitle')}

-
+
@@ -40,7 +52,7 @@ export default async function Home() {
-
+
Check out{' '} @@ -86,7 +98,7 @@ export default async function Home() { Check out{' '} @@ -111,7 +123,8 @@ const CodeLink = ({ lineNumber?: number; }) => { let url = ''; - if (env.NODE_ENV === 'development') { + const isDev = env.NODE_ENV === 'development'; + if (isDev) { const projectRoot = process.cwd(); const absolutePath = path.join(projectRoot, filePath); url = `vscode://file/${absolutePath}:${lineNumber}`; @@ -122,7 +135,10 @@ const CodeLink = ({ return ( - + {fileName} diff --git a/src/components/common/navbar.tsx b/src/components/common/navbar.tsx new file mode 100644 index 0000000..1d047df --- /dev/null +++ b/src/components/common/navbar.tsx @@ -0,0 +1,29 @@ +'use client'; + +import useScrollCallback from '@/lib/hooks/use-scroll-callback'; +import { cn } from '@/lib/utils'; +import { useState } from 'react'; + +interface NavbarProps { + children: React.ReactNode; +} + +const Navbar = ({ children }: NavbarProps) => { + const [isAtTop, setIsAtTop] = useState(true); + useScrollCallback({ + callback: (offsetTop) => { + setIsAtTop(offsetTop < 10); + }, + }); + return ( +
+ {children} +
+ ); +}; + +export default Navbar; diff --git a/src/components/examples/sentry-example.tsx b/src/components/examples/sentry-example.tsx index d6ad820..d68d330 100644 --- a/src/components/examples/sentry-example.tsx +++ b/src/components/examples/sentry-example.tsx @@ -3,10 +3,12 @@ import { Button } from '@/components/ui/button'; import * as Sentry from '@sentry/nextjs'; +import { toast } from 'sonner'; const SentryExample = () => { return (
-
+
{isLoading || isRefetching ? (
Loading...
) : (