= ["type", "maker", "size", "release"];
+
+
+type GroupedRamPrice =Array<{
+ id: number;
+ group: string | number;
+ min:number;
+ mean:number;
+ max:number;
+}>;
+
+const gropuedPrices = groupBycolumns.map((col) => {
+ const out:GroupedRamPrice = [];
+ d3.group(ramPricesList, (d) => d[col]).forEach((values, key) => {
+ const prices = values.map((v) => v.price);
+ out.push({
+ id: out.length + 1,
+ group: key,
+ mean: Math.round((d3.mean(prices) ?? 0)*1000)/1000,
+ max: d3.max(prices) ?? 0,
+ min: d3.min(prices) ?? 0,
+
+ });
+ });
+
+ out.sort((a, b) => {
+ if (typeof a.group === "number" && typeof b.group === "number") {
+ return a.group - b.group;
+ }
+ else if (col === "release" && typeof a.group === "string" && typeof b.group === "string") {
+ return Number(a.group.replace("-", "0")) - Number(b.group.replace("-", "0"));
+ }
+ else {
+ return String(a.group).localeCompare(String(b.group));
+ }
+
+ });
+ return out;
+})
+
+
+export type { GroupedRamPrice };
+export { groupBycolumns as groupByOptions };
+export { realPhotos, sidecardData, mainCards, playbackVideo, ramPricesList, gropuedPrices };
\ No newline at end of file
diff --git a/site/src/list/List.tsx b/site/src/list/List.tsx
new file mode 100644
index 0000000..4579a19
--- /dev/null
+++ b/site/src/list/List.tsx
@@ -0,0 +1,12 @@
+import Navbar from "../components/Navbar";
+import RamGrid from "./components/RamGrid";
+
+function List() {
+ return (
+
+
+
+
+ );
+}
+export default List;
\ No newline at end of file
diff --git a/site/src/list/components/RamGrid.tsx b/site/src/list/components/RamGrid.tsx
new file mode 100644
index 0000000..51f60e7
--- /dev/null
+++ b/site/src/list/components/RamGrid.tsx
@@ -0,0 +1,28 @@
+import { DataGrid } from "@mui/x-data-grid";
+import type { GridRowsProp, GridColDef } from "@mui/x-data-grid";
+import Container from '@mui/material/Container';
+import { ruRU } from '@mui/x-data-grid/locales';
+
+import {ramPricesList} from "../../data";
+
+function RamGrid() {
+ const rows: GridRowsProp = ramPricesList;
+ const columns: GridColDef[] = [
+ { field: 'type', headerName: 'Type', flex: 0.5},
+ { field: 'name', headerName: 'Model', flex: 1},
+ { field: 'maker', headerName: 'Maker', flex: 0.5},
+ { field: 'size', headerName: 'Size (GB)'},
+ { field: 'release', headerName: 'Release Year-month',flex: 0.5},
+ { field: 'price' ,headerName: 'Price(USD)'},
+ ]
+ return (
+
+
+
+ )
+}
+export default RamGrid;
\ No newline at end of file
diff --git a/site/src/main.tsx b/site/src/main.tsx
index d68fac9..879e191 100644
--- a/site/src/main.tsx
+++ b/site/src/main.tsx
@@ -1,10 +1,42 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
-import './styles/index.css'
-import App from './App.tsx'
+import {
+ createBrowserRouter,
+ RouterProvider,
+} from "react-router-dom";
+
+import List from "./list/List";
+import Chart from "./chart/Chart";
+import Main from "./main/Main";
+import ProjectDetails from "./projectDetails/ProjectDetails";
+
+
+
+const router = createBrowserRouter([
+ {
+ path: "",
+ element: ,
+ },
+ {
+ path: "/project-details/:id",
+ element: ,
+ },
+ {
+ path: "/list",
+ element:
,
+ },
+ {
+ path: "/chart",
+ element: ,
+ },
+]);
+
+
+
+import './styles/index.css'
createRoot(document.getElementById('root')!).render(
-
+
,
)
diff --git a/site/src/main/Main.tsx b/site/src/main/Main.tsx
new file mode 100644
index 0000000..7177d80
--- /dev/null
+++ b/site/src/main/Main.tsx
@@ -0,0 +1,27 @@
+import NavBar from '../components/Navbar'
+import CustomFooter from "../components/CustomFooter";
+
+import Gallery from "./components/Gallery";
+import MainContent from "./components/Content";
+import Sidebar from "./components/Sidebar";
+
+import { Container } from "@mui/material";
+
+import '../styles/App.css'
+
+function App() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default App
diff --git a/site/src/components/BigCard.tsx b/site/src/main/components/BigCard.tsx
similarity index 100%
rename from site/src/components/BigCard.tsx
rename to site/src/main/components/BigCard.tsx
diff --git a/site/src/components/Content.tsx b/site/src/main/components/Content.tsx
similarity index 92%
rename from site/src/components/Content.tsx
rename to site/src/main/components/Content.tsx
index eafde97..71ff240 100644
--- a/site/src/components/Content.tsx
+++ b/site/src/main/components/Content.tsx
@@ -1,6 +1,6 @@
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
-import {mainCards} from "../data";
+import {mainCards} from "../../data";
import BigCard from "./BigCard"
const cardData = mainCards
diff --git a/site/src/components/Gallery.tsx b/site/src/main/components/Gallery.tsx
similarity index 94%
rename from site/src/components/Gallery.tsx
rename to site/src/main/components/Gallery.tsx
index e5ebbbb..44ca8a1 100644
--- a/site/src/components/Gallery.tsx
+++ b/site/src/main/components/Gallery.tsx
@@ -1,6 +1,6 @@
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
-import {realPhotos} from "../data";
+import {realPhotos} from "../../data";
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import ImageListItemBar from '@mui/material/ImageListItemBar';
@@ -15,7 +15,7 @@ function Gallery() {
sx={{
columnCount: {
xs: '1 !important',
- sm: '3 !important',
+ sm: '1 !important',
md: '3 !important',
lg: '3 !important',
},
diff --git a/site/src/main/components/Sidebar.tsx b/site/src/main/components/Sidebar.tsx
new file mode 100644
index 0000000..1f0568f
--- /dev/null
+++ b/site/src/main/components/Sidebar.tsx
@@ -0,0 +1,18 @@
+import Container from '@mui/material/Container';
+import {sidecardData} from "../../data";
+import SmallCard from "./SmallCard"
+const cardData = sidecardData
+
+function Content() {
+ return (
+
+ {cardData.map((item, index) => (
+ //
+
+ //
+ ))}
+
+ );
+}
+
+export default Content;
\ No newline at end of file
diff --git a/site/src/components/SmallCard.tsx b/site/src/main/components/SmallCard.tsx
similarity index 67%
rename from site/src/components/SmallCard.tsx
rename to site/src/main/components/SmallCard.tsx
index 72d370a..3626ec1 100644
--- a/site/src/components/SmallCard.tsx
+++ b/site/src/main/components/SmallCard.tsx
@@ -6,13 +6,14 @@ import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
+import { Link } from 'react-router-dom';
interface ComponentProps {
data: {
img: string,
title: string,
description: string[]
},
- cardNum: number;
+ idx: number;
}
@@ -21,20 +22,20 @@ const StyledTypography = styled(Typography)(({ theme }) => ({
textAlign: 'justify',
marginBottom: '2px',
fontSize: '12px',
- padding:"5px"
+ padding: "5px"
}));
-function SmallCard({ data }: ComponentProps) {
+function SmallCard({ data,idx }: ComponentProps) {
// if(reverseModifier){
// [textA,textB] = [textB,textA];
// }
- let buf=data.description.reduce((acc, val) => acc + " " + val, "");
-
- if(buf.length>70){
- buf = buf.slice(0,70)+"...";
+ let buf = data.description.reduce((acc, val) => acc + " " + val, "");
+
+ if (buf.length > 70) {
+ buf = buf.slice(0, 70) + "...";
}
const textPart = buf;
@@ -50,14 +51,16 @@ function SmallCard({ data }: ComponentProps) {
}}>
-
- {textPart}
-
-
- {data.description}
-
-
-
+
+ {textPart}
+
+
+ {data.description}
+
+
+
+
+
@@ -65,7 +68,7 @@ function SmallCard({ data }: ComponentProps) {
component="img"
alt={data.title}
image={data.img}
- sx={{objectFit: 'fill' }}
+ sx={{ objectFit: 'fill' }}
/>
diff --git a/site/src/projectDetails/ProjectDetails.tsx b/site/src/projectDetails/ProjectDetails.tsx
new file mode 100644
index 0000000..4c7972e
--- /dev/null
+++ b/site/src/projectDetails/ProjectDetails.tsx
@@ -0,0 +1,57 @@
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import {sidecardData} from '../data.tsx';
+import { useParams, Link } from 'react-router-dom';
+import BackgroundVideo from "./components/BackgroundVideo";
+
+const StyledTypography = styled(Typography)(({ theme }) => ({
+ color: theme.palette.text.secondary,
+ textAlign: 'justify',
+ marginBottom: '1em',
+}));
+
+
+function ProjectDetails() {
+ const { id } = useParams();
+ const projectDetails = sidecardData[Number(id)];
+ return (
+ <>
+
+
+
+ Main > {projectDetails.title}
+
+
+ {projectDetails.title}
+
+
+
+
+
+ {projectDetails.description.map((item, ind) => (
+
+ {item}
+
+ ))}
+
+
+
+
+
+
+
+
+ )
+}
+
+export default ProjectDetails;
\ No newline at end of file
diff --git a/site/src/projectDetails/components/BackgroundVideo.tsx b/site/src/projectDetails/components/BackgroundVideo.tsx
new file mode 100644
index 0000000..0be221e
--- /dev/null
+++ b/site/src/projectDetails/components/BackgroundVideo.tsx
@@ -0,0 +1,36 @@
+import { useState } from "react";
+
+import { playbackVideo } from '../../data.tsx';
+
+const BgVideo = () => {
+ const videoSrc = playbackVideo;
+ const [loading, setLoading] = useState(true);
+ const makeVisible = () => {
+ setLoading(false);
+ }
+
+ return (
+
+ );
+
+}
+
+export default BgVideo;
\ No newline at end of file
diff --git a/site/src/styles/index.css b/site/src/styles/index.css
index 5fb3313..32d37df 100644
--- a/site/src/styles/index.css
+++ b/site/src/styles/index.css
@@ -2,7 +2,7 @@
--text: #6b6375;
--text-h: #08060d;
--bg: #fff;
- --border: #e5e4e7;
+ /* --border: #e5e4e7; */
--code-bg: #f4f3ec;
--accent: #aa3bff;
--accent-bg: rgba(170, 59, 255, 0.1);