From 80b09c969b05df5ad96025c7cdb7df46ce65effa Mon Sep 17 00:00:00 2001 From: Yaseen-Ejaz Date: Wed, 1 Jan 2025 21:39:12 -0500 Subject: [PATCH 1/2] Fixed dock comp --- components/core/dock.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/components/core/dock.tsx b/components/core/dock.tsx index 36164d84..34e79578 100644 --- a/components/core/dock.tsx +++ b/components/core/dock.tsx @@ -20,6 +20,7 @@ import { useState, } from 'react'; import { cn } from '@/lib/utils'; +import React from 'react'; const DOCK_HEIGHT = 128; const DEFAULT_MAGNIFICATION = 80; @@ -108,7 +109,7 @@ function Dock({ mouseX.set(Infinity); }} className={cn( - 'mx-auto flex w-fit gap-4 rounded-2xl bg-gray-50 px-4 dark:bg-neutral-900', + 'mx-auto flex w-fit gap-4 rounded-2xl bg-black px-4 dark:bg-neutral-900', className )} style={{ height: panelHeight }} @@ -160,12 +161,19 @@ function DockItem({ children, className }: DockItemProps) { aria-haspopup='true' > {Children.map(children, (child) => - cloneElement(child as React.ReactElement, { width, isHovered }) + React.isValidElement(child) + ? cloneElement(child as React.ReactElement<{ width: MotionValue; isHovered: MotionValue }>, { + width, + isHovered, + }) + : child )} ); } + + function DockLabel({ children, className, ...rest }: DockLabelProps) { const restProps = rest as Record; const isHovered = restProps['isHovered'] as MotionValue; @@ -188,7 +196,7 @@ function DockLabel({ children, className, ...rest }: DockLabelProps) { exit={{ opacity: 0, y: 0 }} transition={{ duration: 0.2 }} className={cn( - 'absolute -top-6 left-1/2 w-fit whitespace-pre rounded-md border border-gray-200 bg-gray-100 px-2 py-0.5 text-xs text-neutral-700 dark:border-neutral-900 dark:bg-neutral-800 dark:text-white', + 'absolute -top-6 left-1/2 w-fit whitespace-pre rounded-md px-2 py-0.5 text-sm text-white dark:border-neutral-900 dark:bg-neutral-800 dark:text-white', className )} role='tooltip' From b2647359e3f62f2048a818428b8971b1d6011c8c Mon Sep 17 00:00:00 2001 From: Yaseen-Ejaz Date: Wed, 1 Jan 2025 21:42:03 -0500 Subject: [PATCH 2/2] Fixed dock --- components/core/dock.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/components/core/dock.tsx b/components/core/dock.tsx index 34e79578..dc8571db 100644 --- a/components/core/dock.tsx +++ b/components/core/dock.tsx @@ -18,9 +18,9 @@ import { useMemo, useRef, useState, + React } from 'react'; import { cn } from '@/lib/utils'; -import React from 'react'; const DOCK_HEIGHT = 128; const DEFAULT_MAGNIFICATION = 80; @@ -109,7 +109,7 @@ function Dock({ mouseX.set(Infinity); }} className={cn( - 'mx-auto flex w-fit gap-4 rounded-2xl bg-black px-4 dark:bg-neutral-900', + 'mx-auto flex w-fit gap-4 rounded-2xl bg-gray-50 px-4 dark:bg-neutral-900', className )} style={{ height: panelHeight }} @@ -172,8 +172,6 @@ function DockItem({ children, className }: DockItemProps) { ); } - - function DockLabel({ children, className, ...rest }: DockLabelProps) { const restProps = rest as Record; const isHovered = restProps['isHovered'] as MotionValue; @@ -196,7 +194,7 @@ function DockLabel({ children, className, ...rest }: DockLabelProps) { exit={{ opacity: 0, y: 0 }} transition={{ duration: 0.2 }} className={cn( - 'absolute -top-6 left-1/2 w-fit whitespace-pre rounded-md px-2 py-0.5 text-sm text-white dark:border-neutral-900 dark:bg-neutral-800 dark:text-white', + 'absolute -top-6 left-1/2 w-fit whitespace-pre rounded-md border border-gray-200 bg-gray-100 px-2 py-0.5 text-xs text-neutral-700 dark:border-neutral-900 dark:bg-neutral-800 dark:text-white', className )} role='tooltip'