From 3105d77e9efeb6aac7f03e5bca759ab7e8f688a0 Mon Sep 17 00:00:00 2001 From: Felix Wotschofsky Date: Mon, 23 Dec 2024 11:27:07 +0100 Subject: [PATCH] =?UTF-8?q?Redesign=20tabs=20=F0=9F=97=82=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[domain]/_components/results-tabs.tsx | 66 +++++++++---------- app/lookup/[domain]/layout.tsx | 11 ++-- package.json | 1 + pnpm-lock.yaml | 58 ++++++++++++++++ 4 files changed, 96 insertions(+), 40 deletions(-) diff --git a/app/lookup/[domain]/_components/results-tabs.tsx b/app/lookup/[domain]/_components/results-tabs.tsx index b5682f3..7bb6fde 100644 --- a/app/lookup/[domain]/_components/results-tabs.tsx +++ b/app/lookup/[domain]/_components/results-tabs.tsx @@ -1,52 +1,40 @@ 'use client'; import { OptionIcon } from 'lucide-react'; +import { motion } from 'motion/react'; import Link from 'next/link'; import { useRouter, useSelectedLayoutSegment } from 'next/navigation'; import type { FC } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { ClientOnly } from '@/components/client-only'; -import { isAppleDevice } from '@/lib/utils'; +import { cn, isAppleDevice } from '@/lib/utils'; type SingleTabProps = { label: string; href: string; selected: boolean; - shortcutNumber: number; }; -const SingleTab: FC = ({ - label, - href, - selected, - shortcutNumber, -}) => ( +const SingleTab: FC = ({ label, href, selected }) => (
  • - {label} - - - {isAppleDevice() ? ( - <> - - {` + ${shortcutNumber}`} - - ) : ( - `alt+${shortcutNumber}` - )} - - + {selected && ( + + )} + {label}
    • ); @@ -68,39 +56,47 @@ export const ResultsTabs: FC = ({ domain }) => { ]); return ( -
    -
      +
      +
      + + + + {isAppleDevice() ? ( + <> + {' '} + 1-5 + + ) : ( + 'ctrl+1-5' + )} + +
      ); }; diff --git a/app/lookup/[domain]/layout.tsx b/app/lookup/[domain]/layout.tsx index 9568938..8ca27f9 100644 --- a/app/lookup/[domain]/layout.tsx +++ b/app/lookup/[domain]/layout.tsx @@ -90,12 +90,13 @@ const LookupLayout: FC = async (props) => {
    +
    + +
    +
    - -
    - - {children} -
    + +
    {children}
    diff --git a/package.json b/package.json index 1798f12..bb0a3a6 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "leaflet": "^1.9.4", "leaflet-defaulticon-compatibility": "^0.1.2", "lucide-react": "^0.456.0", + "motion": "^11.15.0", "ms": "^2.1.3", "natural-compare-lite": "^1.4.0", "next": "15.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ec056d3..ed7fd8e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -83,6 +83,9 @@ importers: lucide-react: specifier: ^0.456.0 version: 0.456.0(react@19.0.0) + motion: + specifier: ^11.15.0 + version: 11.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) ms: specifier: ^2.1.3 version: 2.1.3 @@ -2700,6 +2703,20 @@ packages: frame-ticker@1.0.3: resolution: {integrity: sha512-E0X2u2JIvbEMrqEg5+4BpTqaD22OwojJI63K7MdKHdncjtAhGRbCR8nJCr2vwEt9NWBPCPcu70X9smPviEBy8Q==} + framer-motion@11.15.0: + resolution: {integrity: sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==} + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true + fromentries@1.3.2: resolution: {integrity: sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==} @@ -3141,6 +3158,26 @@ packages: resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==} engines: {node: '>=16 || 14 >=14.17'} + motion-dom@11.14.3: + resolution: {integrity: sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==} + + motion-utils@11.14.3: + resolution: {integrity: sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==} + + motion@11.15.0: + resolution: {integrity: sha512-iZ7dwADQJWGsqsSkBhNHdI2LyYWU+hA1Nhy357wCLZq1yHxGImgt3l7Yv0HT/WOskcYDq9nxdedyl4zUv7UFFw==} + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true + ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} @@ -6849,6 +6886,15 @@ snapshots: dependencies: simplesignal: 2.1.7 + framer-motion@11.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0): + dependencies: + motion-dom: 11.14.3 + motion-utils: 11.14.3 + tslib: 2.8.1 + optionalDependencies: + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + fromentries@1.3.2: {} fsevents@2.3.3: @@ -7251,6 +7297,18 @@ snapshots: minipass@7.1.2: {} + motion-dom@11.14.3: {} + + motion-utils@11.14.3: {} + + motion@11.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0): + dependencies: + framer-motion: 11.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + tslib: 2.8.1 + optionalDependencies: + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + ms@2.1.3: {} mz@2.7.0: