Skip to content

Commit c45c034

Browse files
aeltorioaeltorio
committed
wip create select for dilution
1 parent 805f558 commit c45c034

File tree

9 files changed

+600
-251
lines changed

9 files changed

+600
-251
lines changed

‎package-lock.json‎

Lines changed: 418 additions & 207 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,31 +17,33 @@
1717
"@heroui/kbd": "https://pkg.pr.new/@heroui/kbd@4656",
1818
"@heroui/link": "https://pkg.pr.new/@heroui/link@4656",
1919
"@heroui/navbar": "https://pkg.pr.new/@heroui/navbar@4656",
20+
"@heroui/select": "https://pkg.pr.new/@heroui/select@4656",
2021
"@heroui/snippet": "https://pkg.pr.new/@heroui/snippet@4656",
2122
"@heroui/switch": "https://pkg.pr.new/@heroui/switch@4656",
2223
"@heroui/system": "https://pkg.pr.new/@heroui/system@4656",
2324
"@heroui/theme": "https://pkg.pr.new/@heroui/theme@4656",
2425
"@react-aria/visually-hidden": "3.8.19",
2526
"@react-types/shared": "3.27.0",
26-
"@tailwindcss/postcss": "^4.0.6",
27-
"@tailwindcss/vite": "^4.0.6",
27+
"@sctg/aga8-js": "^1.0.8",
28+
"@tailwindcss/postcss": "^4.0.8",
29+
"@tailwindcss/vite": "^4.0.8",
2830
"clsx": "2.1.1",
29-
"framer-motion": "12.4.3",
31+
"framer-motion": "12.4.7",
3032
"react": "19.0.0",
3133
"react-dom": "19.0.0",
32-
"react-router-dom": "7.1.5",
34+
"react-router-dom": "7.2.0",
3335
"tailwind-variants": "0.3.1",
34-
"tailwindcss": "4.0.6"
36+
"tailwindcss": "4.0.8"
3537
},
3638
"devDependencies": {
3739
"@types/node": "20.5.7",
38-
"@types/react": "19.0.8",
39-
"@types/react-dom": "19.0.3",
40-
"@typescript-eslint/eslint-plugin": "8.24.0",
41-
"@typescript-eslint/parser": "8.24.0",
40+
"@types/react": "19.0.10",
41+
"@types/react-dom": "19.0.4",
42+
"@typescript-eslint/eslint-plugin": "8.24.1",
43+
"@typescript-eslint/parser": "8.24.1",
4244
"@vitejs/plugin-react": "^4.3.4",
4345
"autoprefixer": "10.4.20",
44-
"eslint": "^9.20.1",
46+
"eslint": "^9.21.0",
4547
"eslint-config-prettier": "10.0.1",
4648
"eslint-plugin-import": "^2.31.0",
4749
"eslint-plugin-jsx-a11y": "^6.10.2",
@@ -50,10 +52,10 @@
5052
"eslint-plugin-react": "^7.37.4",
5153
"eslint-plugin-react-hooks": "^5.1.0",
5254
"eslint-plugin-unused-imports": "4.1.4",
53-
"postcss": "8.5.2",
54-
"prettier": "3.5.1",
55+
"postcss": "8.5.3",
56+
"prettier": "3.5.2",
5557
"typescript": "5.7.3",
56-
"vite": "^6.1.0",
58+
"vite": "^6.1.1",
5759
"vite-tsconfig-paths": "^5.1.4"
5860
}
5961
}

‎src/components/GasSelector.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from "react";
2+
import { Select, SelectItem } from "@heroui/select";
3+
import { availableGasMixtures, type GasMixtureExt } from "@sctg/aga8-js";
4+
5+
interface GasSelectorProps {
6+
selectedGas: GasMixtureExt;
7+
onGasChange: (gas: GasMixtureExt) => void;
8+
}
9+
10+
export const GasSelector: React.FC<GasSelectorProps> = ({
11+
selectedGas,
12+
onGasChange,
13+
}) => {
14+
return (
15+
<Select
16+
aria-label="Gas Mixtures"
17+
className="max-w-xs"
18+
selectedKeys={new Set([selectedGas.name])}
19+
selectionMode="single"
20+
variant="flat"
21+
onSelectionChange={(keys) => {
22+
const gasName = keys.currentKey;
23+
const gas = availableGasMixtures.find((_gas) => _gas.name === gasName);
24+
25+
if (gas) {
26+
onGasChange(gas);
27+
}
28+
}}
29+
>
30+
{availableGasMixtures.map((gas) => (
31+
<SelectItem key={gas.name}>{gas.name}</SelectItem>
32+
))}
33+
</Select>
34+
);
35+
};

‎src/components/OrificeSelector.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from "react";
2+
import { Select, SelectItem } from "@heroui/select";
3+
4+
interface OrificeSelectorProps {
5+
selectedOrifice: number;
6+
onOrificeChange: (orifice: number) => void;
7+
}
8+
export const OrificeSelector: React.FC<OrificeSelectorProps> = ({
9+
selectedOrifice,
10+
onOrificeChange,
11+
}) => {
12+
return (
13+
<Select
14+
aria-label="Orifice Sizes"
15+
className="max-w-xs"
16+
selectedKeys={new Set([selectedOrifice.toString()])}
17+
selectionMode="single"
18+
variant="flat"
19+
onSelectionChange={(keys) => {
20+
const orifice = parseFloat(keys.currentKey as string);
21+
22+
if (!isNaN(orifice)) {
23+
onOrificeChange(orifice);
24+
}
25+
}}
26+
>
27+
<SelectItem key={0.001}>1 Micron</SelectItem>
28+
<SelectItem key={0.002}>2 Micron</SelectItem>
29+
<SelectItem key={0.003}>3 Micron</SelectItem>
30+
<SelectItem key={0.004}>4 Micron</SelectItem>
31+
<SelectItem key={0.005}>5 Micron</SelectItem>
32+
<SelectItem key={0.006}>6 Micron</SelectItem>
33+
<SelectItem key={0.007}>7 Micron</SelectItem>
34+
<SelectItem key={0.008}>8 Micron</SelectItem>
35+
<SelectItem key={0.009}>9 Micron</SelectItem>
36+
<SelectItem key={0.01}>10 Micron</SelectItem>
37+
<SelectItem key={0.012}>12 Micron</SelectItem>
38+
<SelectItem key={0.015}>15 Micron</SelectItem>
39+
<SelectItem key={0.017}>17 Micron</SelectItem>
40+
<SelectItem key={0.02}>20 Micron</SelectItem>
41+
<SelectItem key={0.023}>23 Micron</SelectItem>
42+
<SelectItem key={0.025}>25 Micron</SelectItem>
43+
<SelectItem key={0.03}>30 Micron</SelectItem>
44+
<SelectItem key={0.035}>35 Micron</SelectItem>
45+
<SelectItem key={0.04}>40 Micron</SelectItem>
46+
<SelectItem key={0.045}>45 Micron</SelectItem>
47+
<SelectItem key={0.05}>50 Micron</SelectItem>
48+
<SelectItem key={0.075}>75 Micron</SelectItem>
49+
<SelectItem key={0.1}>100 Micron</SelectItem>
50+
<SelectItem key={0.15}>150 Micron</SelectItem>
51+
<SelectItem key={0.2}>200 Micron</SelectItem>
52+
<SelectItem key={0.25}>250 Micron</SelectItem>
53+
<SelectItem key={0.3}>300 Micron</SelectItem>
54+
<SelectItem key={0.35}>350 Micron</SelectItem>
55+
<SelectItem key={0.4}>400 Micron</SelectItem>
56+
<SelectItem key={0.45}>450 Micron</SelectItem>
57+
<SelectItem key={0.5}>500 Micron</SelectItem>
58+
<SelectItem key={0.55}>550 Micron</SelectItem>
59+
<SelectItem key={0.6}>600 Micron</SelectItem>
60+
<SelectItem key={0.65}>650 Micron</SelectItem>
61+
<SelectItem key={0.7}>700 Micron</SelectItem>
62+
<SelectItem key={0.75}>750 Micron</SelectItem>
63+
<SelectItem key={0.8}>800 Micron</SelectItem>
64+
<SelectItem key={0.85}>850 Micron</SelectItem>
65+
<SelectItem key={0.9}>900 Micron</SelectItem>
66+
<SelectItem key={0.95}>950 Micron</SelectItem>
67+
<SelectItem key={1.0}>1000 Micron</SelectItem>
68+
</Select>
69+
);
70+
};

‎src/components/footer.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Link } from "@heroui/link";
2+
3+
export const Footer = () => {
4+
return (
5+
<footer className="w-full flex items-center justify-center py-3">
6+
<Link
7+
isExternal
8+
className="flex items-center gap-1 text-current"
9+
href="https://www.sctg.eu.org"
10+
title="SCTG Development"
11+
>
12+
<span className="text-default-600">Powered by</span>
13+
<p className="text-primary">SCTG</p>
14+
</Link>
15+
</footer>
16+
);
17+
};

‎src/components/navbar.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -83,18 +83,11 @@ export const Navbar = () => {
8383
justify="end"
8484
>
8585
<NavbarItem className="hidden sm:flex gap-2">
86-
<Link isExternal href={siteConfig.links.twitter} title="Twitter">
87-
<TwitterIcon className="text-default-500" />
88-
</Link>
89-
<Link isExternal href={siteConfig.links.discord} title="Discord">
90-
<DiscordIcon className="text-default-500" />
91-
</Link>
9286
<Link isExternal href={siteConfig.links.github} title="GitHub">
9387
<GithubIcon className="text-default-500" />
9488
</Link>
9589
<ThemeSwitch />
9690
</NavbarItem>
97-
<NavbarItem className="hidden lg:flex">{searchInput}</NavbarItem>
9891
<NavbarItem className="hidden md:flex">
9992
<Button
10093
isExternal

‎src/config/site.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
export type SiteConfig = typeof siteConfig;
22

33
export const siteConfig = {
4-
name: "Vite + HeroUI",
5-
description: "Make beautiful websites regardless of your design experience.",
4+
name: "Flow Dilution",
5+
description: "Comprehensive dilution simulator for AGA8 gaz",
66
navItems: [
77
{
88
label: "Home",
@@ -60,10 +60,10 @@ export const siteConfig = {
6060
},
6161
],
6262
links: {
63-
github: "https://github.com/frontio-ai/heroui",
64-
twitter: "https://twitter.com/hero_ui",
65-
docs: "https://heroui.com",
66-
discord: "https://discord.gg/9b6yyZKmH4",
67-
sponsor: "https://patreon.com/jrgarciadev",
63+
github: "https://github.com/sctg-development/flow-dilution",
64+
// twitter: "https://twitter.com/hero_ui",
65+
// docs: "https://heroui.com",
66+
// discord: "https://discord.gg/9b6yyZKmH4",
67+
sponsor: "https://github.com/sponsors/sctg-development",
6868
},
6969
};

‎src/layouts/default.tsx‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import type React from "react";
22

3-
import { Link } from "@heroui/link";
4-
53
import { Navbar } from "@/components/navbar";
4+
import { Footer } from "@/components/footer";
65

76
export default function DefaultLayout({
87
children,
@@ -15,17 +14,7 @@ export default function DefaultLayout({
1514
<main className="container mx-auto max-w-7xl px-6 flex-grow pt-16">
1615
{children}
1716
</main>
18-
<footer className="w-full flex items-center justify-center py-3">
19-
<Link
20-
isExternal
21-
className="flex items-center gap-1 text-current"
22-
href="https://heroui.com"
23-
title="heroui.com homepage"
24-
>
25-
<span className="text-default-600">Powered by</span>
26-
<p className="text-primary">HeroUI</p>
27-
</Link>
28-
</footer>
17+
<Footer />
2918
</div>
3019
);
3120
}

‎src/pages/blog.tsx‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,44 @@
1+
import React from "react";
2+
import { availableGasMixtures, type GasMixtureExt } from "@sctg/aga8-js";
3+
4+
import { GasSelector } from "@/components/GasSelector";
5+
import { OrificeSelector } from "@/components/OrificeSelector";
16
import { title } from "@/components/primitives";
27
import DefaultLayout from "@/layouts/default";
38

4-
export default function DocsPage() {
9+
export default function DilutionPage() {
10+
const [selectedGasInlet1, setSelectedGasInlet1] =
11+
React.useState<GasMixtureExt>(availableGasMixtures[0]);
12+
const [selectedGasInlet2, setSelectedGasInlet2] =
13+
React.useState<GasMixtureExt>(availableGasMixtures[0]);
14+
const [selectedOrificeInlet1, setSelectedOrificeInlet1] =
15+
React.useState<number>(0.02);
16+
const [selectedOrificeInlet2, setSelectedOrificeInlet2] =
17+
React.useState<number>(0.02);
18+
519
return (
620
<DefaultLayout>
7-
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
8-
<div className="inline-block max-w-lg text-center justify-center">
9-
<h1 className={title()}>Blog</h1>
21+
<section className="">
22+
<div className="">
23+
<h1 className={title()}>Dilution</h1>
24+
<div className="">
25+
<GasSelector
26+
selectedGas={selectedGasInlet1}
27+
onGasChange={setSelectedGasInlet1}
28+
/>
29+
<GasSelector
30+
selectedGas={selectedGasInlet2}
31+
onGasChange={setSelectedGasInlet2}
32+
/>
33+
<OrificeSelector
34+
selectedOrifice={selectedOrificeInlet1}
35+
onOrificeChange={setSelectedOrificeInlet1}
36+
/>
37+
<OrificeSelector
38+
selectedOrifice={selectedOrificeInlet2}
39+
onOrificeChange={setSelectedOrificeInlet2}
40+
/>
41+
</div>
1042
</div>
1143
</section>
1244
</DefaultLayout>

0 commit comments

Comments
 (0)