├── .gitignore ├── .vscode ├── extensions.json └── launch.json ├── README.md ├── astro.config.mjs ├── package-lock.json ├── package.json ├── postcss.config.js ├── public └── icons │ ├── Group.svg │ ├── Option.svg │ ├── Pie1.svg │ ├── Pie2.svg │ ├── Star.svg │ └── favicon.svg ├── src ├── components │ ├── AuthNum.jsx │ ├── BarChart.jsx │ ├── LastSalesTable.jsx │ ├── LineChart.jsx │ ├── LinkButton.jsx │ ├── MarketTable.jsx │ ├── SmallButton.jsx │ ├── lastsales │ │ └── index.jsx │ ├── market │ │ ├── components │ │ │ └── PieChart.jsx │ │ └── index.jsx │ └── state │ │ ├── components │ │ ├── Header.jsx │ │ ├── MarketRange.jsx │ │ ├── SalesProgress.jsx │ │ ├── States.jsx │ │ ├── StatesChart.jsx │ │ └── TotalPrice.jsx │ │ └── index.jsx ├── env.d.ts ├── layouts │ └── Layout.astro ├── pages │ └── index.astro └── styles │ └── global.css ├── tailwind.config.js └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | 4 | # generated types 5 | .astro/ 6 | 7 | # dependencies 8 | node_modules/ 9 | 10 | # logs 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | 23 | # jetbrains setting folder 24 | .idea/ 25 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Astro Starter Kit: Basics 2 | 3 | ```sh 4 | npm create astro@latest -- --template basics 5 | ``` 6 | 7 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) 8 | [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics) 9 | [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json) 10 | 11 | > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! 12 | 13 | ![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554) 14 | 15 | ## 🚀 Project Structure 16 | 17 | Inside of your Astro project, you'll see the following folders and files: 18 | 19 | ```text 20 | / 21 | ├── public/ 22 | │ └── favicon.svg 23 | ├── src/ 24 | │ ├── components/ 25 | │ │ └── Card.astro 26 | │ ├── layouts/ 27 | │ │ └── Layout.astro 28 | │ └── pages/ 29 | │ └── index.astro 30 | └── package.json 31 | ``` 32 | 33 | Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. 34 | 35 | There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. 36 | 37 | Any static assets, like images, can be placed in the `public/` directory. 38 | 39 | ## 🧞 Commands 40 | 41 | All commands are run from the root of the project, from a terminal: 42 | 43 | | Command | Action | 44 | | :------------------------ | :----------------------------------------------- | 45 | | `npm install` | Installs dependencies | 46 | | `npm run dev` | Starts local dev server at `localhost:4321` | 47 | | `npm run build` | Build your production site to `./dist/` | 48 | | `npm run preview` | Preview your build locally, before deploying | 49 | | `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | 50 | | `npm run astro -- --help` | Get help using the Astro CLI | 51 | 52 | ## 👀 Want to learn more? 53 | 54 | Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). 55 | -------------------------------------------------------------------------------- /astro.config.mjs: -------------------------------------------------------------------------------- 1 | // astro.config.mjs 2 | import { defineConfig } from 'astro/config'; 3 | import react from '@astrojs/react'; 4 | 5 | export default defineConfig({ 6 | integrations: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "strong-sphere", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "scripts": { 6 | "dev": "astro dev", 7 | "start": "astro dev", 8 | "build": "astro build", 9 | "preview": "astro preview", 10 | "astro": "astro" 11 | }, 12 | "dependencies": { 13 | "@astrojs/react": "^3.3.4", 14 | "astro": "^4.8.6", 15 | "chart.js": "^4.4.3", 16 | "react": "^18.3.1", 17 | "react-chartjs-2": "^5.2.0", 18 | "react-dom": "^18.3.1", 19 | "recharts": "^2.12.7" 20 | }, 21 | "devDependencies": { 22 | "autoprefixer": "^10.4.19", 23 | "postcss": "^8.4.38", 24 | "tailwindcss": "^3.4.3" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } -------------------------------------------------------------------------------- /public/icons/Group.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/icons/Option.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/icons/Pie1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/icons/Pie2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/icons/Star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/icons/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/AuthNum.jsx: -------------------------------------------------------------------------------- 1 | const AuthNum = () => { 2 | return ( 3 |
4 | ); 5 | }; 6 | export default AuthNum; 7 | -------------------------------------------------------------------------------- /src/components/BarChart.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const data = [ 4 | { month: 'Jan', value: 70 }, 5 | { month: 'Feb', value: 140 }, 6 | { month: 'Mar', value: 120 }, 7 | { month: 'Apr', value: 150 }, 8 | { month: 'May', value: 110 }, 9 | { month: 'Jun', value: 165 }, 10 | { month: 'Jul', value: 100 }, 11 | { month: 'Aug', value: 140 }, 12 | { month: 'Sep', value: 60 }, 13 | { month: 'Oct', value: 120 }, 14 | { month: 'Nov', value: 70 }, 15 | { month: 'Dec', value: 110 } 16 | ]; 17 | 18 | const BarChart = () => { 19 | return ( 20 |
21 | {data.map((item, index) => ( 22 |
23 |
32 | {item.month} 33 |
34 | ))} 35 |
36 | ); 37 | } 38 | 39 | export default BarChart; 40 | -------------------------------------------------------------------------------- /src/components/LastSalesTable.jsx: -------------------------------------------------------------------------------- 1 | import LinkButton from "./LinkButton"; 2 | 3 | const LastSalesTable = (props) => { 4 | return ( 5 | <> 6 |
7 |
8 |
9 |

{props.name}

10 |

{props.available}

11 |
12 |
13 |
14 |

{props.maxPrice}

15 | 16 |
17 | 18 | ); 19 | }; 20 | export default LastSalesTable; 21 | -------------------------------------------------------------------------------- /src/components/LineChart.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { LineChart, Line, ResponsiveContainer, Legend } from "recharts"; 3 | import BarChart from "./BarChart"; 4 | 5 | const data = [ 6 | { name: "Jan", Retail: 3000, Market: 2400 }, 7 | { name: "Feb", Retail: 4000, Market: 3398 }, 8 | { name: "Mar", Retail: 5000, Market: 6800 }, 9 | { name: "Apr", Retail: 2780, Market: 3908 }, 10 | { name: "May", Retail: 1890, Market: 4800 }, 11 | { name: "Jun", Retail: 2390, Market: 3800 }, 12 | { name: "Jul", Retail: 3490, Market: 4300 }, 13 | { name: "Aug", Retail: 2000, Market: 2400 }, 14 | { name: "Sep", Retail: 2780, Market: 3908 }, 15 | { name: "Oct", Retail: 1890, Market: 4800 }, 16 | { name: "Nov", Retail: 2390, Market: 3800 }, 17 | { name: "Dec", Retail: 3490, Market: 4300 }, 18 | ]; 19 | 20 | const CustomChart = ({ children }) => { 21 | return ( 22 | 23 | 30 | 31 | 32 | 33 | 34 | 35 | 43 | 51 | 52 | 53 |
54 |
55 | {children} 56 |
57 |
58 | 59 | ); 60 | }; 61 | 62 | export default CustomChart; 63 | -------------------------------------------------------------------------------- /src/components/LinkButton.jsx: -------------------------------------------------------------------------------- 1 | const LinkButton = () => { 2 | return ( 3 | 6 | ); 7 | }; 8 | export default LinkButton; 9 | -------------------------------------------------------------------------------- /src/components/MarketTable.jsx: -------------------------------------------------------------------------------- 1 | import LinkButton from "./LinkButton"; 2 | 3 | const MarketTable = (props) => { 4 | return ( 5 | <> 6 |
7 |
8 |
9 |

{props.name}

10 |

11 | Over {props.available} Available 12 |

13 |
14 |
15 |
16 |

17 | Max Price {props.maxPrice}
Min Price {props.minPrice} 18 |

19 |
20 | 21 | 22 | ); 23 | }; 24 | export default MarketTable; 25 | -------------------------------------------------------------------------------- /src/components/SmallButton.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const SmallButton = (props) => { 4 | return ; 5 | }; 6 | 7 | export default SmallButton; 8 | -------------------------------------------------------------------------------- /src/components/lastsales/index.jsx: -------------------------------------------------------------------------------- 1 | import LinkButton from "../LinkButton"; 2 | import SmallButton from "../SmallButton"; 3 | import LastSalesTable from "../LastSalesTable"; 4 | 5 | const lastSales = [ 6 | { name: "Ebay", available: 2938, maxPrice: "16.690 €", minPrice: "14.690 €" }, 7 | { 8 | name: "WordWideWatch", 9 | available: 1790, 10 | maxPrice: "16.690 €", 11 | minPrice: "14.690 €", 12 | }, 13 | { 14 | name: "SearchWatch", 15 | available: 1234, 16 | maxPrice: "16.690 €", 17 | minPrice: "14.690 €", 18 | }, 19 | { name: "SEW", available: 456, maxPrice: "16.690 €", minPrice: "14.690 €" }, 20 | { 21 | name: "Chronos24", 22 | available: 234, 23 | maxPrice: "16.690 €", 24 | minPrice: "14.690 €", 25 | }, 26 | { name: "Ebay", available: 2938, maxPrice: "16.690 €", minPrice: "14.690 €" }, 27 | { 28 | name: "WordWideWatch", 29 | available: 1790, 30 | maxPrice: "16.690 €", 31 | minPrice: "14.690 €", 32 | }, 33 | { 34 | name: "SearchWatch", 35 | available: 1234, 36 | maxPrice: "16.690 €", 37 | minPrice: "14.690 €", 38 | }, 39 | { name: "SEW", available: 456, maxPrice: "16.690 €", minPrice: "14.690 €" }, 40 | ]; 41 | 42 | const LastSales = () => { 43 | return ( 44 |
45 |
46 |
47 |

LAST SALES

48 |
49 | 50 | 51 | 52 | 53 | 54 |
55 |
56 |
57 | {lastSales.map((item, index) => ( 58 |
64 | 69 |
70 | ))} 71 |
72 |
73 |
74 | ); 75 | }; 76 | 77 | export default LastSales; 78 | -------------------------------------------------------------------------------- /src/components/market/components/PieChart.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Pie } from "react-chartjs-2"; 3 | import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"; 4 | ChartJS.register(ArcElement, Tooltip, Legend); 5 | const PieChart = () => { 6 | const data = { 7 | labels: [ 8 | "Ebay", 9 | "MarketWatch", 10 | "Chronos24", 11 | "MyWatches", 12 | "WatchChart", 13 | "Others", 14 | ], 15 | datasets: [ 16 | { 17 | label: "Watches in the market", 18 | data: [37.5, 12.5, 12.5, 12.5, 12.5, 12.5], 19 | backgroundColor: [ 20 | "#FFC403", 21 | "#3B009A", 22 | "#560BAD", 23 | "#7209B7", 24 | "#B5179E", 25 | "#F72585", 26 | ], 27 | borderWidth: 0, 28 | }, 29 | ], 30 | }; 31 | const options = { 32 | plugins: { 33 | legend: { 34 | display: false, 35 | }, 36 | }, 37 | }; 38 | return ( 39 |
40 |
41 | Logo 42 |
43 | Market Watch Share 44 |
45 | around over 100 website 46 |
47 |
48 |
49 |
May, 2024
50 |
Watches in the Market
51 |
52 |
53 |
54 | 55 |
56 |
57 |
58 |
59 |
List Countries
60 |
61 | List 62 |
63 |
64 |
72 | {data.labels.map((label, index) => ( 73 |
74 |
83 | {label} 84 |
85 | ))} 86 |
87 |
88 |
89 | ); 90 | }; 91 | export default PieChart; 92 | -------------------------------------------------------------------------------- /src/components/market/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import PieChart from "./components/PieChart"; 3 | import SmallButton from "../SmallButton"; 4 | import MarketTable from "../MarketTable"; 5 | 6 | const marketData = [ 7 | { name: "Ebay", available: 2938, maxPrice: "16.690 €", minPrice: "14.690 €" }, 8 | { 9 | name: "WordWideWatch", 10 | available: 1790, 11 | maxPrice: "16.690 €", 12 | minPrice: "14.690 €", 13 | }, 14 | { 15 | name: "SearchWatch", 16 | available: 1234, 17 | maxPrice: "16.690 €", 18 | minPrice: "14.690 €", 19 | }, 20 | { name: "SEW", available: 456, maxPrice: "16.690 €", minPrice: "14.690 €" }, 21 | { 22 | name: "Chronos24", 23 | available: 234, 24 | maxPrice: "16.690 €", 25 | minPrice: "14.690 €", 26 | }, 27 | { name: "SEW", available: 456, maxPrice: "16.690 €", minPrice: "14.690 €" }, 28 | { 29 | name: "Chronos24", 30 | available: 234, 31 | maxPrice: "16.690 €", 32 | minPrice: "14.690 €", 33 | }, 34 | { 35 | name: "WordWideWatch", 36 | available: 1790, 37 | maxPrice: "16.690 €", 38 | minPrice: "14.690 €", 39 | }, 40 | { name: "Ebay", available: 2938, maxPrice: "16.690 €", minPrice: "14.690 €" }, 41 | { 42 | name: "SearchWatch", 43 | available: 1234, 44 | maxPrice: "16.690 €", 45 | minPrice: "14.690 €", 46 | }, 47 | { name: "SEW", available: 456, maxPrice: "16.690 €", minPrice: "14.690 €" }, 48 | { 49 | name: "WordWideWatch", 50 | available: 1790, 51 | maxPrice: "16.690 €", 52 | minPrice: "14.690 €", 53 | }, 54 | { name: "Ebay", available: 2938, maxPrice: "16.690 €", minPrice: "14.690 €" }, 55 | { 56 | name: "SearchWatch", 57 | available: 1234, 58 | maxPrice: "16.690 €", 59 | minPrice: "14.690 €", 60 | }, 61 | { name: "SEW", available: 456, maxPrice: "16.690 €", minPrice: "14.690 €" }, 62 | { 63 | name: "Chronos24", 64 | available: 234, 65 | maxPrice: "16.690 €", 66 | minPrice: "14.690 €", 67 | }, 68 | { name: "SEW", available: 456, maxPrice: "16.690 €", minPrice: "14.690 €" }, 69 | { 70 | name: "Chronos24", 71 | available: 234, 72 | maxPrice: "16.690 €", 73 | minPrice: "14.690 €", 74 | }, 75 | { 76 | name: "WordWideWatch", 77 | available: 1790, 78 | maxPrice: "16.690 €", 79 | minPrice: "14.690 €", 80 | }, 81 | { name: "Ebay", available: 2938, maxPrice: "16.690 €", minPrice: "14.690 €" }, 82 | { 83 | name: "SearchWatch", 84 | available: 1234, 85 | maxPrice: "16.690 €", 86 | minPrice: "14.690 €", 87 | }, 88 | { name: "SEW", available: 456, maxPrice: "16.690 €", minPrice: "14.690 €" }, 89 | { 90 | name: "WordWideWatch", 91 | available: 1790, 92 | maxPrice: "16.690 €", 93 | minPrice: "14.690 €", 94 | }, 95 | { name: "Ebay", available: 2938, maxPrice: "16.690 €", minPrice: "14.690 €" }, 96 | { 97 | name: "SearchWatch", 98 | available: 1234, 99 | maxPrice: "16.690 €", 100 | minPrice: "14.690 €", 101 | }, 102 | { 103 | name: "SearchWatch", 104 | available: 1234, 105 | maxPrice: "16.690 €", 106 | minPrice: "14.690 €", 107 | }, 108 | { name: "SEW", available: 456, maxPrice: "16.690 €", minPrice: "14.690 €" }, 109 | ]; 110 | 111 | const MarketShare = () => { 112 | const [active, setActive] = useState(1); 113 | const dataPerPage = 5; 114 | const totalPages = Math.ceil(marketData.length / dataPerPage); 115 | const displayedPages = marketData.slice( 116 | (active - 1) * dataPerPage, 117 | active * dataPerPage 118 | ); 119 | 120 | const next = () => { 121 | if (active < totalPages) { 122 | setActive(active + 1); 123 | } 124 | }; 125 | 126 | const prev = () => { 127 | if (active > 1) { 128 | setActive(active - 1); 129 | } 130 | }; 131 | 132 | return ( 133 |
134 |
135 |

Market Share (23456)

136 |
137 | {displayedPages.map((item, index) => ( 138 |
142 | 148 |
149 | ))} 150 |
151 |
152 | 159 | {Array.from({ length: totalPages }, (_, i) => i + 1).map((index) => ( 160 | 169 | ))} 170 | 177 |
178 |
179 | 180 |
181 | ); 182 | }; 183 | 184 | export default MarketShare; 185 | -------------------------------------------------------------------------------- /src/components/state/components/Header.jsx: -------------------------------------------------------------------------------- 1 | const Header = () => { 2 | return ( 3 |
4 |
5 |

GMT Master II

6 |
7 |

GMT-Master II (Batgirl)

8 | 11 |
12 |
13 | ); 14 | }; 15 | export default Header; 16 | -------------------------------------------------------------------------------- /src/components/state/components/MarketRange.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from "react"; 2 | import { Chart } from "chart.js/auto"; 3 | const data = { 4 | labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], 5 | datasets: [ 6 | { 7 | label: "Group A", 8 | data: [14500, 15000, 14000, 16500, 14000, 15500, 16000, 15000], 9 | borderColor: "#FF0066", 10 | backgroundColor: "rgba(255, 0, 102, 0.2)", 11 | fill: false, 12 | tension: 0.4, 13 | pointRadius: 0, // No peak circles 14 | pointHoverRadius: 0, // No hover effect on points 15 | }, 16 | { 17 | label: "Group B", 18 | data: [14000, 14500, 13500, 13800, 13200, 15000, 15500, 14500], 19 | borderColor: "#FFC107", 20 | backgroundColor: "rgba(255, 193, 7, 0.2)", 21 | fill: false, 22 | tension: 0.4, 23 | pointRadius: 0, // No peak circles 24 | pointHoverRadius: 0, // No hover effect on points 25 | }, 26 | ], 27 | }; 28 | const MarketRangeChart = () => { 29 | const canvasRef = useRef(null); 30 | useEffect(() => { 31 | const canvas = canvasRef.current; 32 | if (canvas) { 33 | const ctx = canvas.getContext("2d"); 34 | if (ctx) { 35 | new Chart(ctx, { 36 | type: "line", 37 | data: data, 38 | options: { 39 | responsive: true, 40 | maintainAspectRatio: false, 41 | scales: { 42 | y: { 43 | beginAtZero: false, 44 | min: 13000, 45 | max: 17000, 46 | ticks: { 47 | color: "white", 48 | stepSize: 1000, // Setting y-axis interval to 1000 49 | }, 50 | grid: { 51 | color: "rgba(255, 255, 255, 0.1)", 52 | }, 53 | }, 54 | x: { 55 | ticks: { 56 | color: "white", 57 | padding: 15, 58 | }, 59 | grid: { 60 | display: false, 61 | }, 62 | }, 63 | }, 64 | plugins: { 65 | legend: { 66 | labels: { 67 | color: "white", 68 | }, 69 | }, 70 | }, 71 | }, 72 | }); 73 | } 74 | } 75 | }, []); 76 | return ( 77 |
78 |
79 | Market Range 80 |
81 | Last 12 M 82 |
83 |
84 | 85 |
86 |
87 |

88 | Good range pricing. Under 15,000€ is a very good pricing. 89 |
90 | Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra 91 | augue. Donec id elit non mi porta gravida at eget metus. 92 |

93 |
94 |
95 | ); 96 | }; 97 | export default MarketRangeChart; 98 | -------------------------------------------------------------------------------- /src/components/state/components/SalesProgress.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | const years = [2021, 2022, 2023, 2024]; 4 | const months = ["Nov", "Dec", "Jan", "Feb", "Mar", "Apr"]; 5 | 6 | const SalesProgress = () => { 7 | const [selectedYear, setSelectedYear] = useState(2021); 8 | return ( 9 | <> 10 |
11 |
12 |
13 |
14 | Sales this Month 15 |
16 |
17 | 263 Sales in the last year 18 |
19 |
20 |
21 | Setting 22 |
23 |
24 |
25 | {years.map((year) => ( 26 | 37 | ))} 38 |
39 |

40 | Minim dolor in amet nulla laboris enim dolore consequatt. 41 |

42 |
43 | {months.map((month) => ( 44 |
45 | {month} 46 |
47 | ))} 48 |
49 |
50 | {Array(12 * months.length) 51 | .fill(0) 52 | .map((_, idx) => { 53 | const randomValue = Math.floor(Math.random() * 4); // Generate a random integer between 0 and 3 54 | const className = `h-4 w-4 rounded-[1px] ${ 55 | randomValue === 0 56 | ? "bg-[#00202D]" 57 | : randomValue === 1 58 | ? "bg-[#003246]" 59 | : randomValue === 2 60 | ? "bg-[#007C84]" 61 | : "bg-[#A3FECC]" 62 | }`; 63 | return
; 64 | })} 65 |
66 |
67 | 68 | Learn how we
count contributions 69 | 70 |
71 | Less 72 |
73 |
74 |
75 |
76 | More 77 |
78 |
79 |
80 |
81 | 84 |
85 | 86 | ); 87 | }; 88 | 89 | export default SalesProgress; 90 | -------------------------------------------------------------------------------- /src/components/state/components/States.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import SalesProgress from "./SalesProgress"; 3 | 4 | const Chart = ({ total, description, children }) => { 5 | return ( 6 |
7 |
8 |
{total}
9 |
{description}
10 |
11 | {children } 12 |
13 |
14 |
15 | ); 16 | }; 17 | 18 | export default Chart; 19 | -------------------------------------------------------------------------------- /src/components/state/components/StatesChart.jsx: -------------------------------------------------------------------------------- 1 | import LineChart from "../../LineChart"; 2 | import BarChart from "../../BarChart"; 3 | import SmallButton from "../../SmallButton"; 4 | 5 | const StatesChart = () => { 6 | return ( 7 | <> 8 |
9 |
GMT Master Batgirl
10 |
11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | 19 | 20 | 21 | 22 | ); 23 | }; 24 | export default StatesChart; 25 | -------------------------------------------------------------------------------- /src/components/state/components/TotalPrice.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const TotalPrice = (props) => { 4 | const colorStyle = { color: props.color }; 5 | 6 | return ( 7 |
8 |
9 |

{props.title}

10 |

{props.description}

11 |
12 |
13 |

{props.total}

14 |

{props.date}

15 |
16 |
17 | ); 18 | }; 19 | export default TotalPrice; -------------------------------------------------------------------------------- /src/components/state/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import States from "./components/States"; 3 | import Header from "./components/Header"; 4 | import TotalPrice from "./components/TotalPrice"; 5 | import AuthNum from "../AuthNum"; 6 | import SalesProgress from "./components/SalesProgress"; 7 | import MarketRangeChart from "./components/MarketRange"; 8 | import StatesChart from "./components/StatesChart"; 9 | 10 | const State = () => { 11 | return ( 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 26 |
27 | 34 |
35 |
36 | 37 |
38 |
39 |
40 |
41 |
42 |
43 | 44 | 45 | 46 | 47 | 48 |
49 |
50 |
51 |
52 | The Rolex 126710BLNR is a watch model from the Rolex brand 53 | and GMT-Master collection. As of May 2024, the average price of 54 | the Rolex GMT-Master II (126710BLNR) on the private sales market 55 | is €15,159, while you can expect to pay €16,244 from a secondary 56 | market dealer. 57 |
58 |
59 | Praesent commodo cursus magna, vel scelerisque nisl consectetur 60 | et. Nulla vitae elit libero, a pharetra augue. Vestibulum id 61 | ligula porta felis euismod semper. 62 |
63 | Praesent commodo cursus magna, vel scelerisque nisl consectetur 64 | et. Nulla vitae elit libero, a pharetra augue. Vestibulum id 65 | ligula porta felis euismod semper.Praesent commodo cursus magna, 66 | vel scelerisque nisl consectetur et. Nulla vitae elit libero, a 67 | pharetra augue. 68 |
69 |
70 |
71 | 74 | 77 | 80 |
81 | 82 | all specs 83 | 84 |
85 |
86 |
87 |
88 |
89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 |
97 |
98 | ); 99 | }; 100 | 101 | export default State; 102 | -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/layouts/Layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import "../styles/global.css"; 3 | interface Props { 4 | title: string; 5 | } 6 | 7 | const { title } = Astro.props; 8 | --- 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | {title} 19 | 23 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from "../layouts/Layout.astro"; 3 | import Chart from "../components/state/components/States"; 4 | import MarketShare from "../components/market"; 5 | import LastSales from "../components/lastsales" 6 | import State from "../components/state"; 7 | --- 8 | 9 | 10 | 12 |
13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 |
23 |
24 |
25 | 26 | -------------------------------------------------------------------------------- /src/styles/global.css: -------------------------------------------------------------------------------- 1 | /* src/styles/global.css */ 2 | @tailwind base; 3 | @tailwind components; 4 | @tailwind utilities; 5 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./src/**/*.{astro,html,js,jsx,ts,tsx,vue}", 5 | "./components/**/*.{astro,html,js,jsx,ts,tsx}", 6 | ], 7 | theme: { 8 | extend: { 9 | backgroundImage: { 10 | 'gradient-three-color': 'linear-gradient(to right, #1FA2FF, #12D8FA, #A6FFCB)', 11 | }, 12 | fontFamily: { 13 | montserrat: ['Montserrat', 'sans-serif'], 14 | }, 15 | }, 16 | }, 17 | plugins: [], 18 | } 19 | 20 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/base" 3 | } 4 | --------------------------------------------------------------------------------