Ignore:
File:
1 edited

Legend:

Unmodified
Added
Removed

  • components/ComponentDialog.tsx

    r6ce6739 ra932c9e  
    1 import React, {useEffect, useState} from 'react';
     1import React, { useEffect, useState } from 'react';
    22import {
    33    Dialog, DialogContent, IconButton, Grid, Box, Typography,
    … …  
    99import SortIcon from '@mui/icons-material/Sort';
    1010
    11 import {onGetAllComponents} from '../pages/+Layout.telefunc';
     11import { onGetAllComponents } from '../pages/+Layout.telefunc';
    1212import ComponentDetailsDialog from "./ComponentDetailsDialog";
    1313
    1414const formatMoney = (amount: number) => `$${amount}`;
    1515
    16 export default function ComponentBrowserDialog({open, category, onClose}: any) {
     16export default function ComponentBrowserDialog({ open, category, onClose }: any) {
    1717    const [components, setComponents] = useState<any[]>([]);
    1818    const [loading, setLoading] = useState(false);
    … …  
    3030            setSortOrder('price_desc');
    3131
    32             onGetAllComponents({componentType: category})
     32            onGetAllComponents({ componentType: category })
    3333                .then((data) => {
    3434                    setComponents(data);
    … …  
    7070            maxWidth="xl"
    7171            fullWidth
    72             sx={{height: '90vh'}}
     72            PaperProps={{ sx: { height: '90vh' } }}
    7373        >
    74             <AppBar position="relative" sx={{bgcolor: '#ff8201'}}>
     74            <AppBar position="relative" sx={{ bgcolor: '#ff8201' }}>
    7575                <Toolbar>
    76                     <Typography sx={{ml: 2, flex: 1, textTransform: 'capitalize'}} variant="h6" component="div">
     76                    <Typography sx={{ ml: 2, flex: 1, textTransform: 'capitalize' }} variant="h6" component="div">
    7777                        Browsing: <b>{category === 'gpu' ? 'Graphics Cards' : category?.toUpperCase()}</b>
    7878                    </Typography>
    7979                    <IconButton edge="start" color="inherit" onClick={onClose}>
    80                         <CloseIcon/>
     80                        <CloseIcon />
    8181                    </IconButton>
    8282                </Toolbar>
    8383            </AppBar>
    8484
    85             <DialogContent sx={{p: 0, display: 'flex', height: '100%'}}>
    86                 <Box sx={{
    87                     width: 300,
    88                     borderRight: '1px solid #ddd',
    89                     p: 3,
    90                     bgcolor: '#1e1e1e',
    91                     display: {xs: 'none', md: 'block'}
    92                 }}>
    93                     <Box sx={{display: 'flex', alignItems: 'center', mb: 2}}>
    94                         <SortIcon sx={{mr: 1}}/>
     85            <DialogContent sx={{ p: 0, display: 'flex', height: '100%' }}>
     86                <Box sx={{ width: 300, borderRight: '1px solid #ddd', p: 3, bgcolor: '#1e1e1e', display: { xs: 'none', md: 'block' } }}>
     87                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
     88                        <SortIcon sx={{ mr: 1 }} />
    9589                        <Typography variant="h6">Sort By</Typography>
    9690                    </Box>
    97                     <FormControl fullWidth size="small" sx={{mb: 4}}>
     91                    <FormControl fullWidth size="small" sx={{ mb: 4 }}>
    9892                        <InputLabel>Price</InputLabel>
    9993                        <Select
    … …  
    107101                    </FormControl>
    108102
    109                     <Divider sx={{mb: 3}}/>
    110 
    111                     <Box sx={{display: 'flex', alignItems: 'center', mb: 2}}>
    112                         <FilterListIcon sx={{mr: 1}}/>
     103                    <Divider sx={{ mb: 3 }} />
     104
     105                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
     106                        <FilterListIcon sx={{ mr: 1 }} />
    113107                        <Typography variant="h6">Filters</Typography>
    114108                    </Box>
    … …  
    121115                        min={0}
    122116                        max={components.length > 0 ? Math.max(...components.map(c => Number(c.price))) : 2000}
    123                         sx={{color: '#ff8201', mb: 2}}
     117                        sx={{ color: '#ff8201', mb: 2}}
    124118                    />
    125                     <Box sx={{display: 'flex', justifyContent: 'space-between', mb: 2}}>
     119                    <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
    126120                        <Typography variant="caption">{formatMoney(priceRange[0])}</Typography>
    127121                        <Typography variant="caption">{formatMoney(priceRange[1])}</Typography>
    … …  
    139133                            {availableBrands.map((brand) => (
    140134                                <MenuItem key={brand} value={brand}>
    141                                     <Checkbox checked={selectedBrands.indexOf(brand) > -1}/>
    142                                     <ListItemText primary={brand}/>
     135                                    <Checkbox checked={selectedBrands.indexOf(brand) > -1} />
     136                                    <ListItemText primary={brand} />
    143137                                </MenuItem>
    144138                            ))}
    … …  
    147141                </Box>
    148142
    149                 <Box sx={{flex: 1, p: 3, overflowY: 'auto'}}>
     143                <Box sx={{ flex: 1, p: 3, overflowY: 'auto' }}>
    150144                    {loading ? (
    151                         <Box sx={{display: 'flex', justifyContent: 'center', mt: 10}}>
    152                             <CircularProgress sx={{color: '#ff8201'}}/>
     145                        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 10 }}>
     146                            <CircularProgress sx={{ color: '#ff8201' }} />
    153147                        </Box>
    154148                    ) : (
    155                         <Grid container spacing={1}>
     149                        <Grid container spacing={3}>
    156150                            {processedComponents.map((comp) => (
    157151                                <Grid item xs={12} sm={6} md={4} lg={3} key={comp.id}>
    158                                     <Card elevation={1} sx={{
    159                                         height: '100%',
    160                                         display: 'flex',
    161                                         flexDirection: 'column',
    162                                         maxWidth: 220,
    163                                         width: 220,
    164                                         overflow: 'hidden',
    165                                         whiteSpace: 'nowrap',
    166                                         textOverflow: 'ellipsis'
    167                                     }}>
     152                                    <Card elevation={3} sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
    168153                                        <CardMedia
    169154                                            component="img"
    170155                                            height="140"
    171                                             // image={`https://placehold.co/400x400?text=${encodeURIComponent(comp.name)}`}
    172                                             image={comp.imgUrl}
     156
     157                                            image={`https://placehold.co/400x400?text=${encodeURIComponent(comp.name)}`}
    173158                                            alt={comp.name}
    174                                             sx={{p: 2, objectFit: 'contain'}}
     159                                            sx={{ p: 2, objectFit: 'contain' }}
    175160                                        />
    176                                         <CardContent sx={{flexGrow: 1}}>
    177                                             <Typography variant="caption" color="text.secondary"
    178                                                         sx={{textTransform: 'uppercase'}}>
     161                                        <CardContent sx={{ flexGrow: 1 }}>
     162                                            <Typography variant="caption" color="text.secondary" sx={{ textTransform: 'uppercase' }}>
    179163                                                {comp.brand}
    180164                                            </Typography>
    181                                             <Typography variant="subtitle1" fontWeight="bold" sx={{
    182                                                 lineHeight: 1.2,
    183                                                 mb: 1,
    184                                             }}>
     165                                            <Typography variant="subtitle1" fontWeight="bold" sx={{ lineHeight: 1.2, mb: 1 }}>
    185166                                                {comp.name}
    186167                                            </Typography>
    187168
    188                                             <Box sx={{
    189                                                 display: 'flex',
    190                                                 justifyContent: 'space-between',
    191                                                 alignItems: 'center',
    192                                                 mt: 2
    193                                             }}>
     169                                            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 2 }}>
    194170                                                <Typography variant="h6" color="primary.main">
    195171                                                    {formatMoney(comp.price)}
    … …  
    197173                                            </Box>
    198174                                        </CardContent>
    199                                         <Box sx={{p: 2, pt: 0}}>
     175                                        <Box sx={{ p: 2, pt: 0}}>
    200176                                            <Button
    201177                                                fullWidth
    202178                                                variant="outlined"
    203                                                 onClick={() => setSelectedComponent(comp)}
    204                                                 sx={{
    205                                                     backgroundColor: '#ff8201',
    206                                                     color: 'white',
    207                                                     borderColor: '#ff8201',
    208                                                     onHover: {backgroundColor: '#e67300', borderColor: '#e67300'}
    209                                                 }}
     179                                                onClick={()=> setSelectedComponent(comp)}
     180                                                sx={{backgroundColor:'#ff8201', color: 'white', borderColor: '#ff8201', onHover: { backgroundColor: '#e67300', borderColor: '#e67300' } }}
    210181                                            >
    211182                                                Details
    … …  
    216187                            ))}
    217188                            {processedComponents.length === 0 && (
    218                                 <Box sx={{width: '100%', textAlign: 'center', mt: 5}}>
     189                                <Box sx={{ width: '100%', textAlign: 'center', mt: 5 }}>
    219190                                    <Typography variant="h6" color="text.secondary">No components match.</Typography>
    220191                                </Box>
Note: See TracChangeset for help on using the changeset viewer.