From 0a4dfb1204ae1902a4c43130eda09d5a07000595 Mon Sep 17 00:00:00 2001 From: Jonas Badalic Date: Thu, 20 Aug 2026 13:43:50 -0700 Subject: [PATCH 1/3] Remove unused public component props that nothing provided. Co-authored-by: Cursor --- src/components/ApplicationStarter.tsx | 307 +++++++----------- src/components/BlogCard.tsx | 39 +-- src/components/Doc.tsx | 5 +- src/components/Dropdown.tsx | 45 +-- src/components/FilterComponents.tsx | 36 +- src/components/LibraryWordmark.tsx | 11 +- src/components/NewsletterSignup.tsx | 20 +- src/components/PartnersSponsorsSection.tsx | 4 +- src/components/RecentPostsWidget.tsx | 12 +- src/components/ShowcaseSection.tsx | 36 +- src/components/StackBlitzEmbed.tsx | 11 +- src/components/TableComponents.tsx | 29 +- src/components/admin/AdminEmptyState.tsx | 14 - src/components/game/scene/BeachChair.tsx | 3 +- .../landing/LandingCopyPromptButton.tsx | 4 +- .../npm-stats/PopularComparisons.tsx | 24 +- src/components/npm-stats/Resizable.tsx | 94 +++--- src/components/shop/ProductCard.tsx | 3 - src/components/shop/ProductDrawer.tsx | 11 - src/components/shop/ui/Button.tsx | 17 +- src/components/shop/ui/Chip.tsx | 21 +- src/components/shop/ui/Qty.tsx | 11 +- src/routes/-shop-browse.tsx | 4 - src/ui/Badge.tsx | 5 +- src/ui/FormInput.tsx | 16 +- src/ui/LogoQueryGG.tsx | 236 +------------- src/ui/Tooltip.tsx | 4 +- 27 files changed, 240 insertions(+), 782 deletions(-) diff --git a/src/components/ApplicationStarter.tsx b/src/components/ApplicationStarter.tsx index 99bafd351..069db05c0 100644 --- a/src/components/ApplicationStarter.tsx +++ b/src/components/ApplicationStarter.tsx @@ -43,21 +43,12 @@ export interface ApplicationStarterProps { builderIntegration?: ApplicationStarterBuilderIntegration className?: string context: ApplicationStarterContext - footerContent?: React.ReactNode enableHotkeys?: boolean - forceRouterOnly?: boolean - formId?: string headerAction?: React.ReactNode - mode?: 'compact' | 'full' onDirtyStateChange?: (dirty: boolean) => void onResolvedResult?: (result: ApplicationStarterResult | null) => void - primaryActionLabel?: string revealOptionsImmediately?: boolean - secondaryActionLabel?: string - showCliExportActions?: boolean showPromptPreview?: boolean - suggestionContext?: ApplicationStarterContext - submitButton?: React.ReactNode title?: React.ReactNode tone?: StarterTone } @@ -139,21 +130,12 @@ export function ApplicationStarter({ builderIntegration, className, context, - footerContent, enableHotkeys = false, - forceRouterOnly = false, - formId, headerAction, - mode = 'full', onDirtyStateChange, onResolvedResult, - primaryActionLabel = 'Copy Prompt', revealOptionsImmediately = false, - secondaryActionLabel = 'Build with Netlify', - showCliExportActions = true, showPromptPreview = true, - suggestionContext, - submitButton, title = 'What would you like to build?', tone = 'cyan', }: ApplicationStarterProps) { @@ -200,16 +182,15 @@ export function ApplicationStarter({ } = useApplicationBuilder({ builderIntegration, context, - forceRouterOnly, - mode, + forceRouterOnly: false, + mode: 'full', onDirtyStateChange, onResolvedResult, revealOptionsImmediately, - suggestionContext, }) const palette = toneClasses[tone] - const compact = mode === 'compact' + const compact = false const isHomeStarter = context === 'home' const [pendingHostingDeployPartner, setPendingHostingDeployPartner] = React.useState(null) @@ -378,13 +359,6 @@ export function ApplicationStarter({ : undefined, [result?.prompt, selectedPromptDeployProvider], ) - const netlifyStartHref = React.useMemo( - () => - resultPrompt - ? buildStarterPromptDeployUrl('netlify', resultPrompt) - : undefined, - [resultPrompt], - ) const codexStartHref = React.useMemo( () => (resultPrompt ? buildCodexStartUrl(resultPrompt) : undefined), [resultPrompt], @@ -458,7 +432,7 @@ export function ApplicationStarter({ ? loadingPhrase : isPromptCopied ? 'Copied' - : primaryActionLabel} + : 'Copy Prompt'} ) const renderCopyCliCommandButton = () => ( @@ -761,7 +735,6 @@ export function ApplicationStarter({ ) : null}
{ event.preventDefault() @@ -1313,10 +1286,6 @@ export function ApplicationStarter({ - - {footerContent ? ( -
{footerContent}
- ) : null} ) : null} @@ -1343,45 +1312,6 @@ export function ApplicationStarter({ isHomeStarter && 'items-end', )} > - {!showCliExportActions ? ( -
- {!selectedHostingDeployPartner - ? renderActionAnchor({ - action: 'netlify', - className: - 'border-[#00AD9F] bg-[#00AD9F] text-white hover:bg-[#009a8e]', - href: netlifyStartHref, - icon: , - label: secondaryActionLabel, - onTrack: () => { - trackActivation({ - action: 'netlify_start', - surface: 'result_panel', - provider: 'netlify', - }) - }, - size: 'sm', - }) - : null} - - {renderActionAnchor({ - action: 'codex', - className: - 'border-gray-900 bg-gray-900 text-white hover:bg-gray-800 dark:border-gray-100 dark:bg-gray-100 dark:text-gray-950 dark:hover:bg-gray-200', - href: codexStartHref, - icon: , - label: 'Open in Codex', - onTrack: () => { - trackActivation({ - action: 'open_codex', - surface: 'result_panel', - }) - }, - size: 'sm', - })} -
- ) : null} -
{renderSelectedHostingDeployButton()} - {showCliExportActions - ? renderCopyCliCommandButton() - : null} + {renderCopyCliCommandButton()} {renderCopyPromptButton()}
- {showCliExportActions ? ( -
- {renderActionAnchor({ - action: 'codex', - className: - 'text-text-secondary hover:text-text-primary', - href: codexStartHref, - icon: ( - - ), - iconOnly: true, - label: 'Open in Codex', - onTrack: () => { - trackActivation({ - action: 'open_codex', - surface: 'result_panel', - }) - }, - size: 'xs', - })} - - {renderActionAnchor({ - action: 'claude', - className: - 'text-text-secondary hover:text-text-primary', - href: claudeStartHref, - icon: , - iconOnly: true, - label: 'Open in Claude', - onTrack: () => { - trackActivation({ - action: 'open_claude', - surface: 'result_panel', - }) - }, - size: 'xs', - })} - - {renderActionAnchor({ - action: 'cursor', - className: - 'text-text-secondary hover:text-text-primary', - href: cursorStartHref, - icon: , - iconOnly: true, - label: 'Open in Cursor', - onTrack: () => { - trackActivation({ - action: 'open_cursor', - surface: 'result_panel', - }) - }, - size: 'xs', - })} - - + {renderActionAnchor({ + action: 'codex', + className: + 'text-text-secondary hover:text-text-primary', + href: codexStartHref, + icon: ( + + ), + iconOnly: true, + label: 'Open in Codex', + onTrack: () => { + trackActivation({ + action: 'open_codex', + surface: 'result_panel', + }) + }, + size: 'xs', + })} + + {renderActionAnchor({ + action: 'claude', + className: + 'text-text-secondary hover:text-text-primary', + href: claudeStartHref, + icon: , + iconOnly: true, + label: 'Open in Claude', + onTrack: () => { + trackActivation({ + action: 'open_claude', + surface: 'result_panel', + }) + }, + size: 'xs', + })} + + {renderActionAnchor({ + action: 'cursor', + className: + 'text-text-secondary hover:text-text-primary', + href: cursorStartHref, + icon: , + iconOnly: true, + label: 'Open in Cursor', + onTrack: () => { + trackActivation({ + action: 'open_cursor', + surface: 'result_panel', + }) + }, + size: 'xs', + })} + + + - - - {renderActionAnchor({ - action: 'download', - className: - 'text-text-secondary hover:text-text-primary', - href: downloadHref, - icon: ( - + ) : ( + - ), - iconOnly: true, - label: 'Download ZIP', - onTrack: () => { - trackActivation({ - action: 'download', - surface: 'result_panel', - }) - }, - size: 'xs', - variant: 'secondary', - })} -
- ) : null} + )} + + + + {renderActionAnchor({ + action: 'download', + className: + 'text-text-secondary hover:text-text-primary', + href: downloadHref, + icon: ( + + ), + iconOnly: true, + label: 'Download ZIP', + onTrack: () => { + trackActivation({ + action: 'download', + surface: 'result_panel', + }) + }, + size: 'xs', + variant: 'secondary', + })} + ) : null} @@ -1538,8 +1461,6 @@ export function ApplicationStarter({ )} - - {compact ? submitButton : null} diff --git a/src/components/BlogCard.tsx b/src/components/BlogCard.tsx index 688ca4302..55b311703 100644 --- a/src/components/BlogCard.tsx +++ b/src/components/BlogCard.tsx @@ -16,16 +16,9 @@ export type { BlogCardPost } from '~/utils/blog-format' type BlogCardProps = { post: BlogCardPost showLibraryBadges?: boolean - /** Hero treatment: side-by-side on wider screens with larger type. Used for - * the single latest post at the top of the blog index. */ - featured?: boolean } -export function BlogCard({ - post, - showLibraryBadges = true, - featured = false, -}: BlogCardProps) { +export function BlogCard({ post, showLibraryBadges = true }: BlogCardProps) { const { slug, title, @@ -40,12 +33,9 @@ export function BlogCard({ const blogLibraries = showLibraryBadges ? getBlogLibraries(library) : [] const cardClassName = twMerge( 'relative flex flex-col justify-between overflow-hidden transition-all hover:shadow-sm hover:border-blue-500', - // Featured: image and copy sit side-by-side once there's room. - featured && 'md:flex-row md:justify-start', ) const mediaClassName = twMerge( 'aspect-video w-full overflow-hidden bg-background-subtle', - featured && 'md:aspect-auto md:w-1/2', ) const content = ( @@ -69,10 +59,10 @@ export function BlogCard({ fit: 'cover', format: 'auto', quality: 80, - width: featured ? 1200 : 800, + width: 800, })} alt="" - loading={featured ? 'eager' : 'lazy'} + loading="lazy" decoding="async" className="w-full h-full object-cover" /> @@ -84,21 +74,9 @@ export function BlogCard({ className={mediaClassName} /> )} -
+
-

- {title} -

+

{title}

by {formatAuthors(authors)} {published ? ( @@ -109,12 +87,7 @@ export function BlogCard({ ) : null}
{excerpt ? ( -

+

{excerpt}

) : null} diff --git a/src/components/Doc.tsx b/src/components/Doc.tsx index a58a2df54..2d21c9d02 100644 --- a/src/components/Doc.tsx +++ b/src/components/Doc.tsx @@ -35,8 +35,6 @@ type DocProps = { pagePath?: string // Breadcrumb props (optional) config?: ConfigSchema - // Footer content rendered after markdown - footer?: React.ReactNode // Optional framework to use (overrides URL and local storage) framework?: string } @@ -55,7 +53,6 @@ export function Doc({ libraryVersion, pagePath, config, - footer, framework: frameworkProp, }: DocProps) { const { groups: startHostingPartnerGroups } = useStartHostingPartners() @@ -194,7 +191,7 @@ export function Doc({ ) : null } /> - {footer ?? } +
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index 2754c6a1e..f62d9e823 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -20,10 +20,8 @@ type DropdownContentProps = { className?: string align?: 'start' | 'center' | 'end' sideOffset?: number - portal?: boolean onFocus?: React.FocusEventHandler onPointerEnter?: React.PointerEventHandler - onPointerLeave?: React.PointerEventHandler } type DropdownItemProps = { @@ -67,35 +65,28 @@ export function DropdownContent({ className, align = 'end', sideOffset = 6, - portal = true, onFocus, onPointerEnter, - onPointerLeave, }: DropdownContentProps) { - const content = ( - - {children} - + return ( + + + {children} + + ) - - if (!portal) { - return content - } - - return {content} } export function DropdownItem({ diff --git a/src/components/FilterComponents.tsx b/src/components/FilterComponents.tsx index 936ca3442..eeca8b067 100644 --- a/src/components/FilterComponents.tsx +++ b/src/components/FilterComponents.tsx @@ -154,27 +154,16 @@ export function TopBarFilter({ interface FilterChipProps { label: string onRemove: () => void - onClick?: () => void className?: string } -export function FilterChip({ - label, - onRemove, - onClick, - className, -}: FilterChipProps) { +export function FilterChip({ label, onRemove, className }: FilterChipProps) { return ( e.key === 'Enter' && onClick() : undefined} - role={onClick ? 'button' : undefined} - tabIndex={onClick ? 0 : undefined} > {label} - {showNote ? ( -

- We'll use your TanStack login email. -

- ) : null} +

+ We'll use your TanStack login email. +

) } diff --git a/src/components/PartnersSponsorsSection.tsx b/src/components/PartnersSponsorsSection.tsx index 34dbae7ce..bad805537 100644 --- a/src/components/PartnersSponsorsSection.tsx +++ b/src/components/PartnersSponsorsSection.tsx @@ -12,7 +12,6 @@ type PartnersSponsorsContentProps = { } type PartnersSponsorsSectionProps = { - analyticsPlacement?: PartnerPlacement className?: string } @@ -106,7 +105,6 @@ function PartnersSponsorsSkeleton() { } export function PartnersSponsorsSection({ - analyticsPlacement = 'library_grid', className = '', }: PartnersSponsorsSectionProps) { return ( @@ -115,7 +113,7 @@ export function PartnersSponsorsSection({ when={visible({ rootMargin: '25%' })} fallback={} > - + ) diff --git a/src/components/RecentPostsWidget.tsx b/src/components/RecentPostsWidget.tsx index 9380fb323..66fbf9583 100644 --- a/src/components/RecentPostsWidget.tsx +++ b/src/components/RecentPostsWidget.tsx @@ -4,8 +4,7 @@ import { fetchRecentPosts, type RecentPost } from '~/utils/blog.functions' import { formatPublishedDate } from '~/utils/blog-format' type RecentPostsWidgetProps = { - posts?: ReadonlyArray - /** Set to false to skip the client fetch when the widget is rendered but not visible (e.g. hidden below a CSS breakpoint). Ignored when `posts` is provided. */ + /** Set to false to skip the client fetch when the widget is rendered but not visible (e.g. hidden below a CSS breakpoint). */ enabled?: boolean } @@ -88,18 +87,15 @@ function RecentPostsSkeleton() { ) } -export function RecentPostsWidget({ - posts, - enabled = true, -}: RecentPostsWidgetProps) { +export function RecentPostsWidget({ enabled = true }: RecentPostsWidgetProps) { const recentPostsQuery = useQuery({ queryKey: ['recentPosts'], queryFn: () => fetchRecentPosts(), - enabled: posts === undefined && enabled, + enabled, staleTime: 1000 * 60 * 5, }) - const visiblePosts = posts ?? recentPostsQuery.data + const visiblePosts = recentPostsQuery.data if (!visiblePosts) { return diff --git a/src/components/ShowcaseSection.tsx b/src/components/ShowcaseSection.tsx index 6c7d6b9f4..2257491e5 100644 --- a/src/components/ShowcaseSection.tsx +++ b/src/components/ShowcaseSection.tsx @@ -19,8 +19,6 @@ interface ShowcaseSectionProps { subtitle?: string libraryId?: LibraryId limit?: number - showViewAll?: boolean - minItems?: number } export function SubmitShowcasePlaceholder({ @@ -61,8 +59,6 @@ export function ShowcaseSection({ subtitle = 'See what the community is building', libraryId, limit = 6, - showViewAll = true, - minItems = 3, }: ShowcaseSectionProps) { const queryClient = useQueryClient() const currentUser = useCurrentUser() @@ -78,7 +74,7 @@ export function ShowcaseSection({ () => data?.showcases || [], [data?.showcases], ) - const placeholdersNeeded = Math.max(0, minItems - showcases.length) + const placeholdersNeeded = Math.max(0, 3 - showcases.length) const showcaseIds = React.useMemo( () => showcases.map((s) => s.showcase.id), @@ -206,7 +202,7 @@ export function ShowcaseSection({ {isLoading ? (
- {Array.from({ length: Math.max(limit, minItems) }).map((_, i) => ( + {Array.from({ length: Math.max(limit, 3) }).map((_, i) => ( ))}
@@ -234,21 +230,19 @@ export function ShowcaseSection({
)} - {showViewAll && ( -
- - - -
- )} +
+ + + +
) } diff --git a/src/components/StackBlitzEmbed.tsx b/src/components/StackBlitzEmbed.tsx index 11e54fdbc..6d412ddc4 100644 --- a/src/components/StackBlitzEmbed.tsx +++ b/src/components/StackBlitzEmbed.tsx @@ -6,9 +6,6 @@ type StackBlitzEmbedProps = { repo: string branch: string examplePath: string - file?: string - preset?: 'node' - height?: string | number title?: string } @@ -16,16 +13,12 @@ export function StackBlitzEmbed({ repo, branch, examplePath, - file, - preset = 'node', - height = '80vh', title, }: StackBlitzEmbedProps) { const isDark = useIsDark() const themeParam = isDark ? 'dark' : 'light' - const fileParam = file ? `&file=${encodeURIComponent(file)}` : '' - const src = `https://stackblitz.com/github/${repo}/tree/${branch}/${examplePath}?embed=1&theme=${themeParam}&preset=${preset}${fileParam}` + const src = `https://stackblitz.com/github/${repo}/tree/${branch}/${examplePath}?embed=1&theme=${themeParam}&preset=node` return ( //oxlint-disable-next-line jsx-a11y/iframe-has-title @@ -37,7 +30,7 @@ export function StackBlitzEmbed({ sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" className="shadow-lg" loading="lazy" - style={{ width: '100%', height, border: '0' }} + style={{ width: '100%', height: '80vh', border: '0' }} /> ) } diff --git a/src/components/TableComponents.tsx b/src/components/TableComponents.tsx index 239cfa97e..0926665be 100644 --- a/src/components/TableComponents.tsx +++ b/src/components/TableComponents.tsx @@ -59,16 +59,12 @@ interface TableHeaderCellProps { children?: React.ReactNode className?: string align?: 'left' | 'right' | 'center' - width?: string - compact?: boolean } export function TableHeaderCell({ children, className = '', align = 'left', - width, - compact = true, }: TableHeaderCellProps) { const alignClass = align === 'right' @@ -76,12 +72,9 @@ export function TableHeaderCell({ : align === 'center' ? 'text-center' : 'text-left' - const paddingClass = compact ? 'px-2 py-1.5' : 'px-4 py-2' - const textSizeClass = compact ? 'text-[10px]' : 'text-xs' return ( {children} @@ -93,8 +86,6 @@ interface SortableTableHeaderCellProps { children?: React.ReactNode className?: string align?: 'left' | 'right' | 'center' - width?: string - compact?: boolean sortable?: boolean sortDirection?: 'asc' | 'desc' | false onSort?: () => void @@ -104,8 +95,6 @@ export function SortableTableHeaderCell({ children, className = '', align = 'left', - width, - compact = true, sortable = false, sortDirection = false, onSort, @@ -116,22 +105,15 @@ export function SortableTableHeaderCell({ : align === 'center' ? 'text-center' : 'text-left' - const paddingClass = compact ? 'px-2 py-1.5' : 'px-4 py-2' - const textSizeClass = compact ? 'text-[10px]' : 'text-xs' - const baseClass = `${paddingClass} ${alignClass} ${textSizeClass} font-semibold text-gray-600 dark:text-gray-400 uppercase whitespace-nowrap ${className}` + const baseClass = `px-2 py-1.5 ${alignClass} text-[10px] font-semibold text-gray-600 dark:text-gray-400 uppercase whitespace-nowrap ${className}` if (!sortable) { - return ( - - {children} - - ) + return {children} } return ( ) => void } @@ -197,7 +178,6 @@ export function TableCell({ className = '', align = 'left', colSpan, - compact = true, onClick, }: TableCellProps) { const alignClass = @@ -206,10 +186,9 @@ export function TableCell({ : align === 'center' ? 'text-center' : 'text-left' - const paddingClass = compact ? 'px-2 py-2' : 'px-4 py-3' return ( diff --git a/src/components/admin/AdminEmptyState.tsx b/src/components/admin/AdminEmptyState.tsx index 6fa2cc84a..04cdb4319 100644 --- a/src/components/admin/AdminEmptyState.tsx +++ b/src/components/admin/AdminEmptyState.tsx @@ -1,22 +1,15 @@ import * as React from 'react' -import { Link } from '@tanstack/react-router' -import { Button } from '~/ui' type AdminEmptyStateProps = { icon: React.ReactNode title: string description?: string - action?: { - label: string - to: string - } } export function AdminEmptyState({ icon, title, description, - action, }: AdminEmptyStateProps) { return (
@@ -31,13 +24,6 @@ export function AdminEmptyState({ {description}

)} - {action && ( -
- - - -
- )}
) } diff --git a/src/components/game/scene/BeachChair.tsx b/src/components/game/scene/BeachChair.tsx index 647e52f09..417561e16 100644 --- a/src/components/game/scene/BeachChair.tsx +++ b/src/components/game/scene/BeachChair.tsx @@ -4,15 +4,14 @@ import * as THREE from 'three' interface BeachChairProps { position?: [number, number, number] rotation?: number - color?: string } export function BeachChair({ position = [0, 0, 0], rotation = 0, - color = '#DC143C', // Cherry red }: BeachChairProps) { const woodColor = '#D97706' + const color = '#DC143C' const seatGeometry = useMemo(() => { return new THREE.BoxGeometry(0.6, 0.05, 0.8) diff --git a/src/components/landing/LandingCopyPromptButton.tsx b/src/components/landing/LandingCopyPromptButton.tsx index c15e8a14d..3d96eca31 100644 --- a/src/components/landing/LandingCopyPromptButton.tsx +++ b/src/components/landing/LandingCopyPromptButton.tsx @@ -6,14 +6,12 @@ import { copyTextToClipboard } from '~/utils/browser-effects' type LandingCopyPromptButtonProps = { className?: string - getPrompt?: () => Promise | string label?: string prompt?: string } export function LandingCopyPromptButton({ className, - getPrompt, label = 'Copy Prompt', prompt, }: LandingCopyPromptButtonProps) { @@ -48,7 +46,7 @@ export function LandingCopyPromptButton({ setStatus('copying') try { - const resolvedPrompt = getPrompt ? await getPrompt() : prompt + const resolvedPrompt = prompt if (!resolvedPrompt) { throw new Error('Prompt unavailable') diff --git a/src/components/npm-stats/PopularComparisons.tsx b/src/components/npm-stats/PopularComparisons.tsx index 7331c06c0..6c19c2e95 100644 --- a/src/components/npm-stats/PopularComparisons.tsx +++ b/src/components/npm-stats/PopularComparisons.tsx @@ -10,19 +10,11 @@ export type ComparisonGroup = { type PopularComparisonsProps = { comparisons: ComparisonGroup[] - // Optional: customize the link target - linkTo?: string - // Optional: callback when a comparison is clicked - onSelect?: (comparison: ComparisonGroup) => void } const PREVIEW_PACKAGE_LIMIT = 8 -export function PopularComparisons({ - comparisons, - linkTo = '.', - onSelect, -}: PopularComparisonsProps) { +export function PopularComparisons({ comparisons }: PopularComparisonsProps) { return (

Presets

@@ -87,22 +79,10 @@ export function PopularComparisons({
) - if (onSelect) { - return ( - - ) - } - return ( ) => ({ ...prev, packageGroups: comparison.packageGroups, diff --git a/src/components/npm-stats/Resizable.tsx b/src/components/npm-stats/Resizable.tsx index 3cd2bbd01..1d1a9caa3 100644 --- a/src/components/npm-stats/Resizable.tsx +++ b/src/components/npm-stats/Resizable.tsx @@ -17,10 +17,6 @@ export type ResizableProps = { options: ResizeChangeOptions, ) => void children: React.ReactNode - minHeight?: number - minWidth?: number - fullWidthSnapThreshold?: number - enableWidthResize?: boolean } type ResizePreviewSize = { @@ -36,10 +32,6 @@ export function Resizable({ width, onSizeChange, children, - minHeight = 300, - minWidth = 320, - fullWidthSnapThreshold = 12, - enableWidthResize = true, }: ResizableProps) { const [isHeightDragging, setIsHeightDragging] = React.useState(false) const [isWidthDragging, setIsWidthDragging] = React.useState(false) @@ -96,26 +88,26 @@ export function Resizable({ }, [containerWidth]) const getHeightFromDelta = React.useCallback( - (deltaY: number) => Math.max(minHeight, startHeightRef.current + deltaY), - [minHeight], + (deltaY: number) => Math.max(300, startHeightRef.current + deltaY), + [], ) const getWidthFromDelta = React.useCallback( ({ deltaX, maxWidth }: { deltaX: number; maxWidth: number }) => { const rawWidth = startWidthRef.current + deltaX * 2 - const nextMinWidth = Math.min(minWidth, maxWidth) + const nextMinWidth = Math.min(320, maxWidth) const nextWidth = Math.max( nextMinWidth, Math.min(maxWidth, Math.round(rawWidth)), ) - if (nextWidth >= maxWidth - fullWidthSnapThreshold) { + if (nextWidth >= maxWidth - 12) { return undefined } return nextWidth }, - [fullWidthSnapThreshold, minWidth], + [], ) const handleHeightMouseDown = React.useCallback( @@ -307,48 +299,44 @@ export function Resizable({ style={{ width: width ?? '100%', maxWidth: '100%' }} > {children} - {enableWidthResize ? ( -
+