Changeset 8a7f936 for pages/index


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

File:
1 edited

Legend:

Unmodified
Added
Removed

  • 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.