Changeset 8a7f936 for pages


Ignore:
Timestamp:
12/29/25 00:37:49 (6 months ago)
Author:
Mihail <mihail2.naumov@…>
Branches:
main
Children:
5af32f0
Parents:
ae5d054
Message:

Added Forge Page, added suggest component, fixed styling

Location:
pages
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • pages/dashboard/admin/+Page.tsx

    rae5d054 r8a7f936  
    4949    const openSuggestionReview = (id: number, action: 'approved' | 'rejected') => {
    5050        setSuggestionDialog({ open: true, id, action });
    51         setAdminComment(action === 'approved' ? "Approved by admin." : "Rejected: ");
     51        setAdminComment(action === 'approved' ? "" : "");
    5252    };
    5353
    … …  
    123123                                                        </a>
    124124                                                    </TableCell>
    125                                                     <TableCell>{sug.componentType}</TableCell>
     125                                                    <TableCell>{sug.componentType.toUpperCase()}</TableCell>
    126126                                                    <TableCell>{sug.userId}</TableCell>
    127127                                                    <TableCell align="right">
    … …  
    207207
    208208            <Dialog open={suggestionDialog.open} onClose={() => setSuggestionDialog({...suggestionDialog, open: false})}>
    209                 <DialogTitle>Review Suggestion</DialogTitle>
     209                <DialogTitle>Review Component Suggestion</DialogTitle>
    210210                <DialogContent>
    211211                    <Typography gutterBottom>Status: <b>{suggestionDialog.action.toUpperCase()}</b></Typography>

  • pages/forge/+Page.tsx

    rae5d054 r8a7f936  
    1 export default function ForgePage(){
     1import React, {useState, useEffect, useMemo} from 'react';
     2import {
     3    Container, Paper, Typography, Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
     4    Button, IconButton, Avatar, TextField, Grid, Chip, CircularProgress,
     5    Menu, MenuItem, ListItemIcon
     6} from '@mui/material';
     7import AddIcon from '@mui/icons-material/Add';
     8import DeleteIcon from '@mui/icons-material/Delete';
     9import CloseIcon from "@mui/icons-material/Close";
     10import AlbumIcon from "@mui/icons-material/Album";
     11import CableIcon from "@mui/icons-material/Cable";
     12import RouterIcon from "@mui/icons-material/Router";
     13import MemoryIcon from "@mui/icons-material/Memory";
     14
     15import {
     16    saveBuildState,
     17    onAddComponentToBuild,
     18    onRemoveComponentFromBuild,
     19    onDeleteBuild,
     20    onGetBuildState, onGetBuildComponents
     21} from './forge.telefunc';
     22
     23import ComponentDialog from '../../components/ComponentDialog';
     24import ComponentDetailsDialog from '../../components/ComponentDetailsDialog';
     25import {onAddNewBuild, onGetComponentDetails} from "../+Layout.telefunc";
     26import {onEditBuild} from "../dashboard/user/userDashboard.telefunc";
     27
     28type BuildSlot = {
     29    id: string;
     30    type: string;
     31    label: string;
     32    component: any | null;
     33    required: boolean;
     34};
     35
     36const INITIAL_SLOTS: BuildSlot[] = [
     37    {id: 'cpu', type: 'cpu', label: 'CPU', component: null, required: true},
     38    {id: 'cooler', type: 'cooler', label: 'CPU Cooler', component: null, required: true},
     39    {id: 'motherboard', type: 'motherboard', label: 'Motherboard', component: null, required: true},
     40    {id: 'memory_1', type: 'memory', label: 'Memory', component: null, required: true},
     41    {id: 'gpu', type: 'gpu', label: 'Video Card', component: null, required: true},
     42    {id: 'storage_1', type: 'storage', label: 'Storage', component: null, required: true},
     43    {id: 'powersupply', type: 'power_supply', label: 'Power Supply', component: null, required: true},
     44    {id: 'case', type: 'case', label: 'Case', component: null, required: true},
     45];
     46
     47export default function ForgePage() {
     48    const [slots, setSlots] = useState<BuildSlot[]>(INITIAL_SLOTS);
     49    const [buildId, setBuildId] = useState<number | null>(null);
     50    const [buildName, setBuildName] = useState("");
     51    const [description, setDescription] = useState("");
     52    const [totalPrice, setTotalPrice] = useState(0);
     53    const [isSubmitting, setIsSubmitting] = useState(false);
     54
     55    const [browserOpen, setBrowserOpen] = useState(false);
     56    const [activeSlotId, setActiveSlotId] = useState<string | null>(null);
     57    const [detailsOpen, setDetailsOpen] = useState<any>(null);
     58    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
     59    const isSubmittedRef = React.useRef(false);
     60
     61    useEffect(() => {
     62        const price = slots.reduce((sum, slot) => sum + (Number(slot.component?.price) || 0), 0);
     63        setTotalPrice(price);
     64    }, [slots]);
     65
     66    useEffect(() => {
     67        if (!buildId) return;
     68
     69        const handleBeforeUnload = () => {
     70            if (!isSubmittedRef.current) {
     71                onDeleteBuild({buildId}).catch(() => {
     72                });
     73            }
     74        };
     75
     76        window.addEventListener('beforeunload', handleBeforeUnload);
     77
     78        return () => {
     79            window.removeEventListener('beforeunload', handleBeforeUnload);
     80            if (!isSubmittedRef.current) {
     81                onDeleteBuild({buildId}).catch(() => {
     82                });
     83            }
     84        };
     85    }, [buildId]);
     86
     87    useEffect(() => {
     88        const urlParams = new URLSearchParams(window.location.search);
     89        const urlBuildId = urlParams.get('buildId');
     90
     91        if (urlBuildId && Number.isInteger(Number(urlBuildId)) && Number(urlBuildId) > 0) {
     92            const loadBuildId = Number(urlBuildId);
     93            onGetBuildComponents({ buildId: loadBuildId })
     94                .then(async (components) => {
     95                    if (components && components.length > 0) {
     96                        setBuildId(loadBuildId);
     97                        setBuildName("Cloned Build");
     98                        setDescription("");
     99
     100                        const detailedComponents = await Promise.all(
     101                            components.map(async (c: any) => {
     102                                const full = await onGetComponentDetails({ componentId: c.id }).catch(() => null);
     103                                return full ? { ...c, ...full, details: full?.details } : c;
     104                            })
     105                        );
     106
     107                        const componentMap = new Map();
     108                        detailedComponents.forEach((c: any) => componentMap.set(c.type, c));
     109
     110                        setSlots(prevSlots => prevSlots.map(slot => {
     111                            const match = componentMap.get(slot.type);
     112                            return match ? { ...slot, component: match } : slot;
     113                        }));
     114
     115                        window.history.replaceState({}, document.title, "/forge");
     116                    }
     117                })
     118                .catch(() => {});
     119        }
     120    }, []);
     121
     122    const handlePickPart = (slotId: string) => {
     123        setActiveSlotId(slotId);
     124        setTimeout(() => setBrowserOpen(true), 0);
     125    };
     126
     127    const handleSelectComponent = async (component: any) => {
     128        if (!activeSlotId) return;
     129
     130        try {
     131            let id = buildId;
     132            if (!id) {
     133                const result = await onAddNewBuild({name: "Draft Build", description: "Work in progress"});
     134                id = typeof result === 'number' ? result : (result as any)?.buildId;
     135                if (!id || !Number.isInteger(id) || id <= 0) {
     136                    alert("Failed to create draft build.");
     137                    return;
     138                }
     139                setBuildId(id);
     140            }
     141
     142            const full = await onGetComponentDetails({componentId: component.id}).catch(() => null);
     143            const merged = full ? {...component, ...full, details: full.details} : component;
     144
     145            setSlots(prev => prev.map(slot =>
     146                slot.id === activeSlotId ? {...slot, component: merged} : slot
     147            ));
     148            setBrowserOpen(false);
     149
     150            await onAddComponentToBuild({buildId: id, componentId: component.id});
     151        } catch (e) {
     152            // console.error("Failed to add component to server build", e);
     153            alert("Failed to add component. Please try again.");
     154        } finally {
     155            setActiveSlotId(null);
     156        }
     157    };
     158
     159    const handleRemovePart = async (slotId: string) => {
     160        const slot = slots.find(s => s.id === slotId);
     161        if (!slot?.component || !buildId) return;
     162
     163        setSlots(prev => prev.map(s =>
     164            s.id === slotId ? {...s, component: null} : s
     165        ));
     166
     167        try {
     168            await onRemoveComponentFromBuild({
     169                buildId,
     170                componentId: slot.component.id
     171            });
     172        } catch (e) {
     173            console.error("Failed to remove component from server", e);
     174        }
     175    };
     176
     177    const handleAddSlot = (type: string, label: string) => {
     178        const count = slots.filter(s => s.type === type).length;
     179        const newSlot: BuildSlot = {
     180            id: `${type}_${count + 1}`,
     181            type,
     182            label: `${label} ${count > 0 ? count + 1 : ''}`,
     183            component: null,
     184            required: false
     185        };
     186        setSlots(prev => [...prev, newSlot]);
     187        setAnchorEl(null);
     188    };
     189
     190    const handleDeleteSlot = (slotId: string) => {
     191        const slot = slots.find(s => s.id === slotId);
     192        if (slot?.component) {
     193            handleRemovePart(slotId);
     194        }
     195        setSlots(prev => prev.filter(s => s.id !== slotId));
     196    };
     197
     198    const handleSubmit = async () => {
     199        if (!buildName.trim()) return alert("Please name your build!");
     200        if (!buildId) return alert("You must add at least one component before submitting.");
     201
     202        setIsSubmitting(true);
     203        try {
     204            const result = await onEditBuild({buildId});
     205
     206            if (!result) throw new Error("Failed to save build");
     207
     208            isSubmittedRef.current = true;
     209            window.location.href = "/dashboard/user";
     210        } catch (e) {
     211            console.error(e);
     212            alert("Failed to save build.");
     213        } finally {
     214            setIsSubmitting(false);
     215        }
     216    };
     217
     218
     219    const activeSlotType = useMemo(() => {
     220        if (!activeSlotId) return null;
     221        return slots.find(s => s.id === activeSlotId)?.type || null;
     222    }, [slots, activeSlotId]);
     223
    2224    return (
    3         <h1>Test Forge Page</h1>
    4     )
     225        <Container maxWidth="xl" sx={{mt: 0, mb: 10}}>
     226            <Paper sx={{p: 4, mb: 0, bgcolor: '#ff8201', border: '1px solid #1e1e1e', color: 'white'}}>
     227                <Typography variant="h4" align="center" fontWeight="bold">Forge Your Machine</Typography>
     228                <Grid container spacing={2} justifyContent="center" sx={{mt: 2}}>
     229                    <Grid item xs={12} md={6}>
     230                        <TextField
     231                            fullWidth
     232                            label="Build Name *"
     233                            value={buildName}
     234                            onChange={e => setBuildName(e.target.value)}
     235                            sx={{bgcolor: '#1e1e1e', borderRadius: 1, color: 'white'}}
     236                        />
     237                    </Grid>
     238                </Grid>
     239            </Paper>
     240
     241            <TableContainer component={Paper} elevation={3}>
     242                <Table sx={{minWidth: 650}}>
     243                    <TableHead sx={{bgcolor: '#1e1e1e'}}>
     244                        <TableRow>
     245                            <TableCell sx={{color: 'white', fontWeight: 'bold'}}>Component</TableCell>
     246                            <TableCell sx={{color: 'white', fontWeight: 'bold'}}>Selection & Specs</TableCell>
     247                            <TableCell sx={{color: 'white', fontWeight: 'bold'}}>Price</TableCell>
     248                            <TableCell sx={{color: 'white', fontWeight: 'bold'}} align="right">Actions</TableCell>
     249                        </TableRow>
     250                    </TableHead>
     251                    <TableBody>
     252                        {slots.map((slot) => (
     253                            <TableRow key={slot.id} hover>
     254                                <TableCell width="15%" sx={{
     255                                    fontWeight: 'bold',
     256                                    bgcolor: '#1e1e1e',
     257                                    color: 'white',
     258                                    verticalAlign: 'top',
     259                                    pt: 3,
     260                                    borderRight: '1px solid #333'
     261                                }}>
     262                                    {slot.label}
     263                                    {slot.required &&
     264                                        <Chip label="Required" size="small" color="error" sx={{ml: 1, height: 20}}/>}
     265                                </TableCell>
     266
     267                                <TableCell>
     268                                    {slot.component ? (
     269                                        <Box sx={{display: 'flex', gap: 2, alignItems: 'flex-start'}}>
     270                                            <Avatar
     271                                                variant="rounded"
     272                                                src={slot.component.imgUrl || slot.component.img_url}
     273                                                sx={{width: 60, height: 60, bgcolor: '#eee'}}
     274                                            >
     275                                                {slot.component.brand?.[0]}
     276                                            </Avatar>
     277                                            <Box>
     278                                                <Typography
     279                                                    variant="subtitle1"
     280                                                    fontWeight="bold"
     281                                                    sx={{cursor: 'pointer', color: 'primary.main'}}
     282                                                    onClick={() => setDetailsOpen(slot.component)}
     283                                                >
     284                                                    {slot.component.name}
     285                                                </Typography>
     286                                                <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 1, mt: 0.5}}>
     287                                                    {renderSpecs(slot.component, slot.type)}
     288                                                </Box>
     289                                            </Box>
     290                                        </Box>
     291                                    ) : (
     292                                        <Button
     293                                            variant="outlined"
     294                                            startIcon={<AddIcon/>}
     295                                            onClick={() => handlePickPart(slot.id)}
     296                                            sx={{textTransform: 'none', color: '#666', borderColor: '#ccc'}}
     297                                        >
     298                                            Choose {slot.label}
     299                                        </Button>
     300                                    )}
     301                                </TableCell>
     302
     303                                <TableCell width="10%" sx={{verticalAlign: 'top', pt: 3}}>
     304                                    {slot.component ? `$${Number(slot.component.price).toFixed(2)}` : '-'}
     305                                </TableCell>
     306
     307                                <TableCell align="right" width="10%" sx={{verticalAlign: 'top', pt: 2}}>
     308                                    {slot.component && (
     309                                        <IconButton color="error" onClick={() => handleRemovePart(slot.id)}>
     310                                            <DeleteIcon/>
     311                                        </IconButton>
     312                                    )}
     313                                    {!slot.required && (
     314                                        <IconButton color="warning" onClick={() => handleDeleteSlot(slot.id)}>
     315                                            <CloseIcon/>
     316                                        </IconButton>
     317                                    )}
     318                                </TableCell>
     319                            </TableRow>
     320                        ))}
     321                    </TableBody>
     322                </Table>
     323            </TableContainer>
     324
     325            <Box sx={{mt: 4, display: 'flex', justifyContent: 'center'}}>
     326                <Button variant="outlined" startIcon={<AddIcon/>} onClick={(e) => setAnchorEl(e.currentTarget)}
     327                        sx={{mr: 2}}>
     328                    Add Optional Component
     329                </Button>
     330                <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
     331                    <Typography sx={{px: 2, py: 1, display: 'block', color: 'text.secondary'}}>
     332                        Memory & Storage
     333                    </Typography>
     334                    <MenuItem onClick={() => handleAddSlot('memory', 'Memory')}>
     335                        <ListItemIcon><MemoryIcon/></ListItemIcon>
     336                        Additional Memory
     337                    </MenuItem>
     338                    <MenuItem onClick={() => handleAddSlot('storage', 'Storage')}>
     339                        <ListItemIcon><AlbumIcon/></ListItemIcon>
     340                        Additional Storage
     341                    </MenuItem>
     342
     343                    <Typography sx={{px: 2, py: 1, display: 'block', color: 'text.secondary', mt: 1}}>
     344                        Accessories
     345                    </Typography>
     346                    <MenuItem onClick={() => handleAddSlot('optical_drive', 'Optical Drive')}>
     347                        <ListItemIcon><AlbumIcon/></ListItemIcon>
     348                        Optical Drive
     349                    </MenuItem>
     350                    <MenuItem onClick={() => handleAddSlot('cables', 'Cable')}>
     351                        <ListItemIcon><CableIcon/></ListItemIcon>
     352                        Cables
     353                    </MenuItem>
     354
     355                    <Typography sx={{px: 2, py: 1, display: 'block', color: 'text.secondary', mt: 1}}>
     356                        Expansion Cards
     357                    </Typography>
     358                    <MenuItem onClick={() => handleAddSlot('memory_card', 'Storage Card')}>
     359                        <ListItemIcon><MemoryIcon/></ListItemIcon>
     360                        Storage Card
     361                    </MenuItem>
     362                    <MenuItem onClick={() => handleAddSlot('sound_card', 'Sound Card')}>
     363                        <ListItemIcon><RouterIcon/></ListItemIcon>
     364                        Sound Card
     365                    </MenuItem>
     366                    <MenuItem onClick={() => handleAddSlot('network_card', 'Network Card')}>
     367                        <ListItemIcon><RouterIcon/></ListItemIcon>
     368                        Network Card
     369                    </MenuItem>
     370                    <MenuItem onClick={() => handleAddSlot('network_adapter', 'WiFi Adapter')}>
     371                        <ListItemIcon><RouterIcon/></ListItemIcon>
     372                        WiFi Adapter
     373                    </MenuItem>
     374                </Menu>
     375            </Box>
     376
     377            <Box sx={{mt: 4, p: 4, bgcolor: '#1e1e1e', textAlign: 'center', borderRadius: 2}}>
     378                <Typography variant="h5" sx={{mb: 2, fontWeight: 'bold', color: 'white'}}>
     379                    Total: ${totalPrice.toFixed(2)}
     380                </Typography>
     381                <Button
     382                    variant="contained"
     383                    color="primary"
     384                    size="large"
     385                    onClick={handleSubmit}
     386                    disabled={isSubmitting}
     387                >
     388                    {isSubmitting ? <CircularProgress size={24}/> : 'Submit Build For Review'}
     389                </Button>
     390            </Box>
     391
     392            <ComponentDialog
     393                open={browserOpen}
     394                category={activeSlotType}
     395                onClose={() => {
     396                    setBrowserOpen(false);
     397                    setActiveSlotId(null);
     398                }}
     399                mode="forge"
     400                onSelect={handleSelectComponent}
     401                currentBuildId={buildId}
     402            />
     403
     404            <ComponentDetailsDialog
     405                open={!!detailsOpen}
     406                component={detailsOpen}
     407                onClose={() => setDetailsOpen(null)}
     408            />
     409        </Container>
     410    );
    5411}
     412
     413function renderSpecs(c: any, type: string) {
     414    if (!c) return null;
     415    const data = {...c, ...(c.details || {})};
     416    const chipStyle = {height: 24, fontSize: '0.75rem', bgcolor: 'rgba(0,0,0,0.05)'};
     417    const specs: string[] = [];
     418    const val = (k: string) => data[k] || data[k.toLowerCase()] || data[k.replace('_', '')];
     419
     420    switch (type) {
     421        case 'cpu':
     422            if (val('socket')) specs.push(val('socket'));
     423            if (val('cores')) specs.push(`${val('cores')} Cores / ${val('threads')} Threads`);
     424            const base = data.baseclock || data.baseClock || data.base_clock;
     425            const boost = data.boostclock || data.boostClock || data.boost_clock;
     426            if (base) specs.push(`Base: ${base}GHz`);
     427            if (boost) specs.push(`Boost: ${boost}GHz`);
     428            break;
     429        case 'gpu':
     430            if (val('vram')) specs.push(`${val('vram')}GB VRAM`);
     431            if (val('chipset')) specs.push(val('chipset'));
     432            if (val('length')) specs.push(`L: ${val('length')}mm`);
     433            break;
     434        case 'motherboard':
     435            if (val('socket')) specs.push(val('socket'));
     436            if (val('formfactor')) specs.push(val('formfactor'));
     437            if (val('ramtype')) specs.push(val('ramtype'));
     438            break;
     439        case 'memory':
     440            if (val('capacity')) specs.push(`${val('capacity')}GB`);
     441            if (val('type')) specs.push(val('type'));
     442            if (val('speed')) specs.push(`${val('speed')} MHz`);
     443            if (val('modules')) specs.push(`${val('modules')}x`);
     444            break;
     445        case 'storage':
     446            if (val('capacity')) specs.push(`${val('capacity')}GB`);
     447            if (val('type')) specs.push(val('type'));
     448            break;
     449        case 'power_supply':
     450            if (val('wattage')) specs.push(`Wattage: ${val('wattage')}W`);
     451            if (val('type')) specs.push(val('type'));
     452            break;
     453        case 'case':
     454            if (val('gpuMaxLength')) specs.push(`Max GPU Length: ${val('gpuMaxLength')}mm`);
     455            if (val('coolerMaxHeight')) specs.push(`Max CPU Cooler Height: ${val('coolerMaxHeight')}mm`);
     456            break;
     457        case 'cooler':
     458            if (val('type')) specs.push(`${val('type')} Cooler`);
     459            if (val('height')) specs.push(`${val('height')}mm`);
     460            break;
     461        default:
     462            if (data.brand) specs.push(data.brand);
     463    }
     464
     465    if (specs.length === 0) {
     466        if (data.brand) return <Chip label={data.brand} sx={chipStyle}/>;
     467        return <Typography variant="caption" color="text.secondary">...</Typography>;
     468    }
     469
     470    return specs.map((label, i) => <Chip key={i} label={label} sx={chipStyle}/>);
     471}

  • pages/index/+Page.tsx

    rae5d054 r8a7f936  
    1 import React, { useEffect, useState } from 'react';
     1import React, {useEffect, useState} from 'react';
    22import {
    33    Container, Box, Typography, Button, Grid, IconButton, Dialog, DialogTitle, DialogContent
    … …  
    1010import BuildCard from '../../components/BuildCard';
    1111
    12 import { onGetApprovedBuilds, onGetAuthState, onCloneBuild } from '../+Layout.telefunc';
     12import {onGetApprovedBuilds, onGetAuthState, onCloneBuild} from '../+Layout.telefunc';
    1313
    1414export default function HomePage() {
    … …  
    2929                ] = await Promise.all([
    3030                    onGetAuthState(),
    31                     onGetApprovedBuilds({ limit: 5 , sort: 'rating_desc' }),
    32                     onGetApprovedBuilds({ limit: 12 }),
    33                     onGetApprovedBuilds({ limit: 10, sort: 'rating_desc' })
     31                    onGetApprovedBuilds({limit: 5, sort: 'rating_desc'}),
     32                    onGetApprovedBuilds({limit: 12}),
     33                    onGetApprovedBuilds({limit: 20, sort: 'rating_desc'})
    3434                ]);
    3535
    … …  
    4545            }
    4646        }
     47
    4748        loadSite();
    4849    }, []);
    … …  
    5152        if (!data?.isLoggedIn) return alert("Please login to clone builds!");
    5253        if (confirm(`Clone this build to your dashboard?`)) {
    53             await onCloneBuild({ buildId });
     54            await onCloneBuild({buildId});
    5455            alert("Build cloned! Check your dashboard.");
    5556            setSelectedBuildId(null);
    … …  
    5758    };
    5859
    59     if (!data) return <Box sx={{ p: 10, textAlign: 'center' }}>Loading Forge...</Box>;
     60    if (!data) return <Box sx={{p: 10, textAlign: 'center'}}>Loading Forge...</Box>;
    6061
    6162    return (
    … …  
    6970                }
    7071            }}>
    71                 <Box sx={{ position: 'relative', textAlign: 'center', zIndex: 1, p: 2 }}>
     72                <Box sx={{position: 'relative', textAlign: 'center', zIndex: 1, p: 2}}>
    7273                    <Typography variant="h2" fontWeight="bold" gutterBottom>Forge Your Ultimate Machine</Typography>
    73                     <Typography variant="h5" sx={{ maxWidth: '800px', mx: 'auto', mb: 1 }}>
     74                    <Typography variant="h5" sx={{maxWidth: '800px', mx: 'auto', mb: 1}}>
    7475                        Build, share, discuss, and discover custom PC configurations.
    7576                    </Typography>
    76                     <Button variant="contained" size="large" href="/forge" startIcon={<AutoFixHighIcon />}
    77                             sx={{ fontSize: '1.2rem', px: 4, py: 1.5, mt: 2 }}>
     77                    <Button variant="contained" size="large" href="/forge" startIcon={<AutoFixHighIcon/>}
     78                            sx={{fontSize: '1.2rem', px: 4, py: 1.5, mt: 2}}>
    7879                        Start Forging
    7980                    </Button>
    … …  
    8182            </Box>
    8283
    83             <Container maxWidth="xl" sx={{ mt: 6, mb: 10 }}>
     84            <Container maxWidth="xl" sx={{mt: 6, mb: 10}}>
    8485                <Box sx={{
    85                     mb: 4, borderLeft: '5px solid #ff8201', pl: 2,
     86                    mb: 2, borderLeft: '5px solid #ff8201', pl: 1,
    8687                    display: 'flex', justifyContent: 'space-between', alignItems: 'end'
    8788                }}>
    … …  
    9293                        </Typography>
    9394                    </Box>
    94                     <Button variant="outlined" startIcon={<ListIcon />} onClick={() => setOpenRankedPopup(true)}>
     95                    <Button variant="outlined" startIcon={<ListIcon/>} onClick={() => setOpenRankedPopup(true)}>
    9596                        Show All Top Ranked
    9697                    </Button>
    9798                </Box>
    98 
    99                 <Grid container spacing={3} sx={{ mb: 8, alignItems: 'stretch' }}>
    100                     {data.prebuilts.slice(0, 3).map((build: any) => (
    101                         <Grid item xs={12} sm={6} md={3} key={build.id} sx={{ display: 'flex' }}>
    102                             <Box sx={{ width: '100%' }}>
    103                                 <BuildCard
    104                                     build={build}
    105                                     onClick={() => setSelectedBuildId(build.id)}
    106                                 />
    107                             </Box>
    108                         </Grid>
     99                <Box
     100                    sx={{
     101                        display: 'grid',
     102                        gridTemplateColumns: {
     103                            xs: '1fr',
     104                            sm: 'repeat(2, 1fr)',
     105                            md: 'repeat(3, 1fr)',
     106                            lg: 'repeat(4, 1fr)',
     107                            xl: 'repeat(5, 1fr)',
     108                        },
     109                        gap: 3,
     110                        width: '90%',
     111                    }}
     112                >
     113                    {data.prebuilts.map((build: any) => (
     114                        <BuildCard
     115                            key={build.id}
     116                            build={build}
     117                            onClick={() => setSelectedBuildId(build.id)}
     118                        />
    109119                    ))}
    110                 </Grid>
    111 
    112                 <SectionHeader title="Community Forge" subtitle="Fresh builds from users around the world."/>
    113                 <Grid container spacing={3}>
     120                </Box>
     121
     122                <Box sx={{
     123                    mb: 2, mt: 2, borderLeft: '5px solid #ff8201', pl: 1,
     124                }}>
     125                    <Typography variant="h4" fontWeight="bold" color="text.primary">Community Forge</Typography>
     126                    <Typography variant="subtitle1" color="text.secondary" sx={{mb: 2}}>Fresh builds from users around
     127                        the world.</Typography>
     128                </Box>
     129                <Box
     130                    sx={{
     131                        display: 'grid',
     132                        gridTemplateColumns: {
     133                            xs: '1fr',
     134                            sm: 'repeat(2, 1fr)',
     135                            md: 'repeat(3, 1fr)',
     136                            lg: 'repeat(4, 1fr)',
     137                            xl: 'repeat(5, 1fr)',
     138                        },
     139                        gap: 3,
     140                        width: '90%',
     141                    }}
     142                >
    114143                    {data.communityBuilds.map((build: any) => (
    115                         <Grid item xs={12} sm={6} md={3} key={build.id}>
    116                             <BuildCard
    117                                 build={build}
    118                                 onClick={() => setSelectedBuildId(build.id)}
    119                             />
    120                         </Grid>
     144                        <BuildCard
     145                            key={build.id}
     146                            build={build}
     147                            onClick={() => setSelectedBuildId(build.id)}
     148                        />
    121149                    ))}
    122                 </Grid>
    123 
    124                 <Box sx={{ display: 'flex', justifyContent: 'center', mt: 6 }}>
     150                </Box>
     151
     152                <Box sx={{display: 'flex', justifyContent: 'center', mt: 6}}>
    125153                    <Button variant="outlined" size="large" href="/completed-builds">View All Community Builds</Button>
    126154                </Box>
    … …  
    135163            />
    136164
    137             <Dialog open={openRankedPopup} onClose={() => setOpenRankedPopup(false)} maxWidth="lg" fullWidth scroll="paper">
    138                 <DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
     165            <Dialog open={openRankedPopup} onClose={() => setOpenRankedPopup(false)} maxWidth="xl" fullWidth
     166                    scroll="paper">
     167                <DialogTitle sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
    139168                    Hall of Fame (Top Rated)
    140                     <IconButton onClick={() => setOpenRankedPopup(false)}><CloseIcon /></IconButton>
     169                    <IconButton onClick={() => setOpenRankedPopup(false)}><CloseIcon/></IconButton>
    141170                </DialogTitle>
    142171                <DialogContent dividers>
    143                     <Grid container spacing={3}>
     172                    <Grid container spacing={3} sx={{p: 1}}>
    144173                        {allRanked.map((build: any, index: number) => (
    145                             <Grid item xs={12} sm={6} md={3} key={`ranked-${build.id}`}>
    146                                 <Box sx={{ position: 'relative' }}>
     174                            <Grid
     175                                item
     176                                xs={12}
     177                                sm={6}
     178                                md={3}
     179                                key={`ranked-${build.id}`}
     180                                sx={{display: 'flex'}}
     181                            >
     182                                <Box sx={{position: 'relative', width: '100%', display: 'flex'}}>
    147183                                    <Box sx={{
    148184                                        position: 'absolute', top: -10, left: -10, zIndex: 1,
    149                                         width: 30, height: 30, borderRadius: '50%',
    150                                         bgcolor: index < 3 ? '#ff8201' : 'grey.700', color: 'white',
    151                                         display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold'
     185                                        width: 35, height: 35, borderRadius: '50%',
     186                                        bgcolor: index < 3 ? '#ff8201' : 'grey.800', color: 'white',
     187                                        display: 'flex', alignItems: 'center', justifyContent: 'center',
     188                                        fontWeight: 'bold', border: '2px solid white', boxShadow: 2
    152189                                    }}>
    153190                                        #{index + 1}
    … …  
    166203                </DialogContent>
    167204            </Dialog>
    168 
    169205        </Box>
    170206    );
    171207}
    172 
    173 function SectionHeader({ title, subtitle }: { title: string, subtitle: string }) {
    174     return (
    175         <Box sx={{ mb: 4, borderLeft: '5px solid #ff8201', pl: 2 }}>
    176             <Typography variant="h4" fontWeight="bold" color="text.primary">{title}</Typography>
    177             <Typography variant="subtitle1" color="text.secondary">{subtitle}</Typography>
    178         </Box>
    179     );
    180 }
Note: See TracChangeset for help on using the changeset viewer.