Hugging Face's logo

Spaces:
lengfeng1360
/
api
Build error

App Files Community
api
File size: 3,924 Bytes 
4ef3a0e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
/*

Copyright (C) 2025 QuantumNous



This program is free software: you can redistribute it and/or modify

it under the terms of the GNU Affero General Public License as

published by the Free Software Foundation, either version 3 of the

License, or (at your option) any later version.



This program is distributed in the hope that it will be useful,

but WITHOUT ANY WARRANTY; without even the implied warranty of

MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

GNU Affero General Public License for more details.



You should have received a copy of the GNU Affero General Public License

along with this program. If not, see <https://www.gnu.org/licenses/>.



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,

    copyText,

    handleChange,

    handleCompositionStart,

    handleCompositionEnd,

    isMobile,

    sidebarProps,

    filterVendor,

    models,

    filteredModels,

    loading,

    searchValue,

    showWithRecharge,

    setShowWithRecharge,

    currency,

    setCurrency,

    showRatio,

    setShowRatio,

    viewMode,

    setViewMode,

    tokenUnit,

    setTokenUnit,

    t,

  }) => {
    const [showFilterModal, setShowFilterModal] = useState(false);

    return (
      <>

        {isMobile ? (

          <>

            <div className='w-full'>

              <SearchActions

                selectedRowKeys={selectedRowKeys}

                copyText={copyText}

                handleChange={handleChange}

                handleCompositionStart={handleCompositionStart}

                handleCompositionEnd={handleCompositionEnd}

                isMobile={isMobile}

                searchValue={searchValue}

                setShowFilterModal={setShowFilterModal}

                showWithRecharge={showWithRecharge}

                setShowWithRecharge={setShowWithRecharge}

                currency={currency}

                setCurrency={setCurrency}

                showRatio={showRatio}

                setShowRatio={setShowRatio}

                viewMode={viewMode}

                setViewMode={setViewMode}

                tokenUnit={tokenUnit}

                setTokenUnit={setTokenUnit}

                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}

            showWithRecharge={showWithRecharge}

            setShowWithRecharge={setShowWithRecharge}

            currency={currency}

            setCurrency={setCurrency}

            showRatio={showRatio}

            setShowRatio={setShowRatio}

            viewMode={viewMode}

            setViewMode={setViewMode}

            tokenUnit={tokenUnit}

            setTokenUnit={setTokenUnit}

          />
        )}
      </>
    );
  },
);

PricingTopSection.displayName = 'PricingTopSection';

export default PricingTopSection;