📱 feat(pricing-header): show only search/copy/filter on mobile; hide vendor intro
- Mobile (isMobile=true): render SearchActions (search, copy, filter) only; hide vendor intro card - Keep PricingFilterModal available on mobile for filtering - Desktop/Non-mobile: unchanged behavior (vendor intro remains visible) - Improves small-screen UX by reducing visual clutter and prioritizing primary actions Files: - web/src/components/table/model-pricing/layout/header/PricingTopSection.jsx Notes: - Added `SearchActions` import and conditional rendering - No breaking changes; no styling changes required
This commit is contained in:
@@ -20,6 +20,7 @@ For commercial licensing, please contact support@quantumnous.com
|
||||
import React, { useState, memo } from 'react';
|
||||
import PricingFilterModal from '../../modal/PricingFilterModal';
|
||||
import PricingVendorIntroWithSkeleton from './PricingVendorIntroWithSkeleton';
|
||||
import SearchActions from './SearchActions';
|
||||
|
||||
const PricingTopSection = memo(({
|
||||
selectedRowKeys,
|
||||
@@ -40,28 +41,43 @@ const PricingTopSection = memo(({
|
||||
|
||||
return (
|
||||
<>
|
||||
<PricingVendorIntroWithSkeleton
|
||||
loading={loading}
|
||||
filterVendor={filterVendor}
|
||||
models={filteredModels}
|
||||
allModels={models}
|
||||
t={t}
|
||||
selectedRowKeys={selectedRowKeys}
|
||||
copyText={copyText}
|
||||
handleChange={handleChange}
|
||||
handleCompositionStart={handleCompositionStart}
|
||||
handleCompositionEnd={handleCompositionEnd}
|
||||
isMobile={isMobile}
|
||||
searchValue={searchValue}
|
||||
setShowFilterModal={setShowFilterModal}
|
||||
/>
|
||||
|
||||
{isMobile && (
|
||||
<PricingFilterModal
|
||||
visible={showFilterModal}
|
||||
onClose={() => setShowFilterModal(false)}
|
||||
sidebarProps={sidebarProps}
|
||||
{isMobile ? (
|
||||
<>
|
||||
<div className="w-full">
|
||||
<SearchActions
|
||||
selectedRowKeys={selectedRowKeys}
|
||||
copyText={copyText}
|
||||
handleChange={handleChange}
|
||||
handleCompositionStart={handleCompositionStart}
|
||||
handleCompositionEnd={handleCompositionEnd}
|
||||
isMobile={isMobile}
|
||||
searchValue={searchValue}
|
||||
setShowFilterModal={setShowFilterModal}
|
||||
t={t}
|
||||
/>
|
||||
</div>
|
||||
<PricingFilterModal
|
||||
visible={showFilterModal}
|
||||
onClose={() => setShowFilterModal(false)}
|
||||
sidebarProps={sidebarProps}
|
||||
t={t}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<PricingVendorIntroWithSkeleton
|
||||
loading={loading}
|
||||
filterVendor={filterVendor}
|
||||
models={filteredModels}
|
||||
allModels={models}
|
||||
t={t}
|
||||
selectedRowKeys={selectedRowKeys}
|
||||
copyText={copyText}
|
||||
handleChange={handleChange}
|
||||
handleCompositionStart={handleCompositionStart}
|
||||
handleCompositionEnd={handleCompositionEnd}
|
||||
isMobile={isMobile}
|
||||
searchValue={searchValue}
|
||||
setShowFilterModal={setShowFilterModal}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user