Changeset 40ac7a9 for pages


Ignore:
Timestamp:
12/24/25 16:53:37 (7 months ago)
Author:
Mihail <mihail2.naumov@…>
Branches:
main
Children:
67dfe57
Parents:
6196d60
Message:

Added frontend elements

Location:
pages
Files:
5 added
4 edited
1 moved

Legend:

Unmodified
Added
Removed

  • pages/+Layout.telefunc.ts

    r6196d60 r40ac7a9  
    5050
    5151    return approvedBuilds;
    52 }
    53 
    54 export async function onGetHighestRankedBuilds({ limit }
    55                                                   : { limit?: number }) {
    56     const context = ctx();
    57 
    58     const highestRankedBuilds = await drizzleQueries.getHighestRankedBuilds(context.db, limit);
    59 
    60     return highestRankedBuilds;
    6152}
    6253

  • pages/+Layout.tsx

    r6196d60 r40ac7a9  
    1 import "./Layout.css";
     1import React from 'react';
     2import Navbar from '../components/Navbar';
     3import Footer from '../components/Footer';
     4import Box from '@mui/material/Box';
     5import { ThemeProvider, createTheme } from '@mui/material/styles';
     6import CssBaseline from '@mui/material/CssBaseline';
    27
    3 import logoUrl from "../assets/logo.svg";
    4 import { Link } from "../components/Link";
     8const theme = createTheme({
     9    palette: {
     10        mode: 'dark',
     11        primary: { main: '#ff8201' },
     12        background: { default: '#121212', paper: '#1e1e1e' },
     13    },
     14});
    515
    616export default function Layout({ children }: { children: React.ReactNode }) {
    7   return (
    8     <div
    9       style={{
    10         display: "flex",
    11         maxWidth: 900,
    12         margin: "auto",
    13       }}
    14     >
    15       <Sidebar>
    16         <Logo />
    17         <Link href="/">Welcome</Link>
    18         <Link href="/todo">Todo</Link>
    19         <Link href="/star-wars">Data Fetching</Link>
    20       </Sidebar>
    21       <Content>{children}</Content>
    22     </div>
    23   );
     17    return (
     18        <ThemeProvider theme={theme}>
     19            <CssBaseline />
     20            <Box
     21                sx={{
     22                    display: 'flex',
     23                    flexDirection: 'column',
     24                    minHeight: '100vh',
     25                    bgcolor: 'background.default',
     26                    color: 'text.primary',
     27                }}
     28            >
     29                <Navbar />
     30                <Box component="main" sx={{ flexGrow: 1, py: 3 }}>
     31                    {children}
     32                </Box>
     33                <Footer />
     34            </Box>
     35        </ThemeProvider>
     36    );
    2437}
    25 
    26 function Sidebar({ children }: { children: React.ReactNode }) {
    27   return (
    28     <div
    29       id="sidebar"
    30       style={{
    31         padding: 20,
    32         flexShrink: 0,
    33         display: "flex",
    34         flexDirection: "column",
    35         lineHeight: "1.8em",
    36         borderRight: "2px solid #eee",
    37       }}
    38     >
    39       {children}
    40     </div>
    41   );
    42 }
    43 
    44 function Content({ children }: { children: React.ReactNode }) {
    45   return (
    46     <div id="page-container">
    47       <div
    48         id="page-content"
    49         style={{
    50           padding: 20,
    51           paddingBottom: 50,
    52           minHeight: "100vh",
    53         }}
    54       >
    55         {children}
    56       </div>
    57     </div>
    58   );
    59 }
    60 
    61 function Logo() {
    62   return (
    63     <div
    64       style={{
    65         marginTop: 20,
    66         marginBottom: 10,
    67       }}
    68     >
    69       <a href="/">
    70         <img src={logoUrl} height={64} width={64} alt="logo" />
    71       </a>
    72     </div>
    73   );
    74 }

  • pages/+config.ts

    r6196d60 r40ac7a9  
    1 import type { Config } from "vike/types";
     1import type {Config} from "vike/types";
    22import vikePhoton from "vike-photon/config";
    33import vikeReact from "vike-react/config";
    … …  
    77
    88export default {
    9   // https://vike.dev/head-tags
    10   title: "My Vike App",
    11   description: "Demo showcasing Vike",
     9    // https://vike.dev/head-tags
     10    title: "PC Forge",
     11    description: "PC Forge Site",
     12    passToClient: ["user"],
     13    extends: [vikeReact, vikePhoton],
    1214
    13   passToClient: ["user"],
    14   extends: [vikeReact, vikePhoton],
    15 
    16   // https://vike.dev/vike-photon
    17   photon: {
    18     server: "../server/entry.ts",
    19   },
     15    // https://vike.dev/vike-photon
     16    photon: {
     17        server: "../server/entry.ts",
     18    },
    2019} satisfies Config;

  • pages/Layout.css

    r6196d60 r40ac7a9  
    1 /* Links */
    2 a {
    3   text-decoration: none;
    4 }
    5 #sidebar a {
    6   padding: 2px 10px;
    7   margin-left: -10px;
    8 }
    9 #sidebar a.is-active {
    10   background-color: #eee;
     1html, body {
     2    margin: 0;
     3    padding: 0;
     4    overflow-x: hidden;
     5
    116}
    127
    13 /* Reset */
    148body {
    15   margin: 0;
    16   font-family: sans-serif;
    17 }
    18 * {
    19   box-sizing: border-box;
     9    background: #262636;
    2010}
    2111
    22 /* Page Transition Animation */
     12#app-shell {
     13    min-height: 100vh;
     14    display: flex;
     15    flex-direction: column;
     16}
     17
    2318#page-content {
    24   opacity: 1;
    25   transition: opacity 0.3s ease-in-out;
     19    flex: 1;
     20    padding: 32px 20px;
     21    max-width: 1000px;
     22    width: 100%;
     23    margin: 0 auto;
    2624}
    27 body.page-transition #page-content {
    28   opacity: 0;
     25
     26.navbar {
     27    background: black;
     28    color: white;
    2929}
     30
     31.navbar__logo{
     32    height: 32px;
     33    width: auto;
     34    margin-right: 5px;
     35}
     36
     37.navbar a {
     38    color: white;
     39    text-decoration: none;
     40}
     41
     42.navbar__inner {
     43    width: 100%;
     44    margin: 0 auto;
     45    padding: 5px 15px;
     46    display: flex;
     47    flex-direction: column;
     48    gap: 10px;
     49}
     50
     51.navbar__top {
     52    display: flex;
     53    align-items: center;
     54    justify-content: space-between;
     55    gap: 15px;
     56    min-width: 0;
     57}
     58
     59.navbar__bottom {
     60    display: flex;
     61    align-items: center;
     62    justify-content: space-between;
     63    gap: 16px;
     64    min-width: 0;
     65}
     66
     67.navbar__brand {
     68    font-size: 25px;
     69    font-weight: 700;
     70}
     71
     72.navbar__auth {
     73    display: flex;
     74    align-items: center;
     75    gap: 10px;
     76    font-size: 18px;
     77    opacity: 0.95;
     78    margin-right: 30px;
     79}
     80
     81.navbar__sep {
     82    opacity: 0.5;
     83}
     84
     85.navbar__links {
     86    display: flex;
     87    flex-wrap: wrap;
     88    gap: 20px;
     89    font-size: 18px;
     90}
     91
     92.navbar__links a {
     93    padding: 6px 8px;
     94    border-radius: 8px;
     95}
     96
     97.navbar__links a:hover,
     98.navbar__auth a:hover {
     99    background: rgba(255, 255, 255, 0.18);
     100    color: #ff8201;
     101}
     102
     103.navbar__search input {
     104    width: 220px;
     105    max-width: 45vw;
     106    padding: 8px 10px;
     107    border-radius: 10px;
     108    border: 1px solid rgba(255, 255, 255, 0.15);
     109    background: rgba(255, 255, 255, 0.06);
     110    color: #eaeaea;
     111    outline: none;
     112    margin-right: 30px;
     113    min-width: 0;
     114
     115}
     116
     117.navbar__search input::placeholder {
     118    color: rgba(234, 234, 234, 0.6);
     119}
     120
     121.footer {
     122    border-top: 1px solid rgba(255, 255, 255, 0.08);
     123    background: black;
     124    color: gray;
     125}
     126
     127.footer__inner {
     128    width: 100%;
     129    margin: 0 auto;
     130    padding: 18px 20px;
     131    font-size: 14px;
     132}
Note: See TracChangeset for help on using the changeset viewer.