Compare commits
41 Commits
6c0e427d0e
...
windows95
| Author | SHA1 | Date | |
|---|---|---|---|
| cb4ce4188e | |||
| 53db7e795c | |||
| 3606f9b043 | |||
| 5da900c1c3 | |||
| 8653365af1 | |||
| d914f47640 | |||
| 668d260fd6 | |||
| 03dc0984f3 | |||
| 0d94904c50 | |||
| 2c805ab513 | |||
| 2b21310dfb | |||
| 756e709181 | |||
| 9872b64fbd | |||
| b6c9c51ec3 | |||
| 83f872577b | |||
| 2b489e83ba | |||
| 6189b80ff1 | |||
| df2999516d | |||
| 24f0aa75d5 | |||
| 8f9b2c6abe | |||
| 6595a7f8bb | |||
| c95c9de320 | |||
| f7de45e47c | |||
| 7556d0496a | |||
| 7d68cce351 | |||
| e051a1aa4f | |||
| e9ef31e7ee | |||
| bba4960276 | |||
| b1d639f618 | |||
| 1702e0c408 | |||
| f87d3da269 | |||
| bbee38af9b | |||
| 55d86dbcaf | |||
| e366379a57 | |||
| 19aa35195f | |||
| 4926c3b388 | |||
| 45a02b84f2 | |||
| 7face12353 | |||
| 59dc667c15 | |||
| 0347ead200 | |||
| 9dbb0d6b4d |
@@ -18,6 +18,8 @@ jobs:
|
||||
run: bun install
|
||||
- name: Build
|
||||
run: bun run build
|
||||
- name: Write Git-Hash into html
|
||||
run: ./pipeline/create-git-hash-html.sh
|
||||
- name: Create Build Artifact
|
||||
uses: christopherhx/gitea-upload-artifact@v4
|
||||
with:
|
||||
@@ -31,15 +33,16 @@ jobs:
|
||||
image: oven/bun
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- name: Install Biome
|
||||
run: bun install -g biome
|
||||
- name: Run Biome lint
|
||||
run: biome lint --write
|
||||
- name: Run Biome format check
|
||||
run: biome format --write
|
||||
- name: Setup Biome
|
||||
uses: biomejs/setup-biome@v2
|
||||
with:
|
||||
version: latest
|
||||
token: ${{ secrets.BIOME_TOKEN }}
|
||||
- name: Run Biome
|
||||
run: biome ci .
|
||||
|
||||
build-and-push-docker:
|
||||
needs: [build]
|
||||
create-and-publish-docker-image:
|
||||
needs: [lint]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
@@ -57,7 +60,6 @@ jobs:
|
||||
run: docker build -t git.rivercry.com/wg/monitor-im-flur .
|
||||
- name: Push Docker image
|
||||
run: docker push git.rivercry.com/wg/monitor-im-flur
|
||||
|
||||
- name: Deploy via SSH
|
||||
uses: appleboy/ssh-action@v0.1.10
|
||||
with:
|
||||
@@ -67,8 +69,13 @@ jobs:
|
||||
password: ${{ secrets.GARRISON_DOCKER_PASSWORD }}
|
||||
script: |
|
||||
cd monitor-im-flur
|
||||
echo "Deploying Docker container..."
|
||||
git clean -dfx
|
||||
git reset --hard HEAD
|
||||
git pull
|
||||
docker-compose pull
|
||||
docker-compose stop || true
|
||||
docker-compose rm || true
|
||||
docker-compose up -d
|
||||
docker-compose down
|
||||
docker-compose up -d
|
||||
export HYPRLAND_INSTANCE_SIGNATURE=$(hyprctl instances -j | jq '.[0].instance' | tr -d "'\"")
|
||||
hyprctl dispatch exec 'pkill firefox'
|
||||
hyprctl dispatch exec 'firefox -kiosk localhost:9123'
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
FROM nginx
|
||||
|
||||
FROM nginx:alpine
|
||||
COPY ./dist /usr/share/nginx/html
|
||||
|
||||
COPY nginx.conf /etc/nginx/nginx.conf
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
@@ -6,7 +6,7 @@
|
||||
},
|
||||
"files": {
|
||||
"ignoreUnknown": false,
|
||||
"includes": ["**","!**/dist"]
|
||||
"includes": ["**", "!**/dist"]
|
||||
},
|
||||
"formatter": {
|
||||
"enabled": true,
|
||||
|
||||
12
githooks/pre-commit
Executable file
12
githooks/pre-commit
Executable file
@@ -0,0 +1,12 @@
|
||||
#!/bin/sh
|
||||
|
||||
echo "Running pre-commit hooks..."
|
||||
|
||||
biome check --write
|
||||
biome lint --write
|
||||
|
||||
if git diff --quiet; then
|
||||
exit 0
|
||||
else
|
||||
git add -u
|
||||
fi
|
||||
27
nginx.conf
Normal file
27
nginx.conf
Normal file
@@ -0,0 +1,27 @@
|
||||
worker_processes 1;
|
||||
|
||||
events { worker_connections 1024; }
|
||||
|
||||
http {
|
||||
include mime.types;
|
||||
default_type application/octet-stream;
|
||||
sendfile on;
|
||||
keepalive_timeout 65;
|
||||
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html /git-hash.js;
|
||||
}
|
||||
|
||||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
|
||||
expires 1y;
|
||||
log_not_found off;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
#!/bin/bash
|
||||
11
pipeline/create-git-hash-html.sh
Executable file
11
pipeline/create-git-hash-html.sh
Executable file
@@ -0,0 +1,11 @@
|
||||
#!/bin/sh
|
||||
|
||||
echo "<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Git Hash</title>
|
||||
</head>
|
||||
<body>
|
||||
<pre>GITHUB_SHA = '$GITHUB_SHA';</pre>
|
||||
</body>
|
||||
</html>" > dist/git-hash.html
|
||||
BIN
public/img/amogus.png
Normal file
BIN
public/img/amogus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
public/img/imposter.png
Normal file
BIN
public/img/imposter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 MiB |
3
setup.sh
Executable file
3
setup.sh
Executable file
@@ -0,0 +1,3 @@
|
||||
#!/bin/sh
|
||||
|
||||
git config --local core.hooksPath githooks
|
||||
@@ -1,8 +1,8 @@
|
||||
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI3N2JmOTk1ODI3MzA0ZWIzOWYwNThjMzQ4YTY3ZDJkYyIsImlhdCI6MTc1NjQ3NTM4OSwiZXhwIjoyMDcxODM1Mzg5fQ.TZZ4SUGlERuIVrhzC_wfCN-qS1wSAKNN9uMMDjkqOgA";
|
||||
const token =
|
||||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI3N2JmOTk1ODI3MzA0ZWIzOWYwNThjMzQ4YTY3ZDJkYyIsImlhdCI6MTc1NjQ3NTM4OSwiZXhwIjoyMDcxODM1Mzg5fQ.TZZ4SUGlERuIVrhzC_wfCN-qS1wSAKNN9uMMDjkqOgA";
|
||||
|
||||
async function fetchTentHumidity() {
|
||||
const url =
|
||||
`https://home.rivercry.com/api/states/sensor.third_reality_inc_3rths0224z_luftfeuchtigkeit_2`;
|
||||
const url = `https://home.rivercry.com/api/states/sensor.third_reality_inc_3rths0224z_luftfeuchtigkeit_2`;
|
||||
const response = await fetch(url, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
|
||||
132
src/components/Amogus/Amogus.tsx
Normal file
132
src/components/Amogus/Amogus.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import amogus from "/img/amogus.png";
|
||||
import imposter from "/img/imposter.png";
|
||||
import style from "./style.module.css";
|
||||
|
||||
type Amogus = {
|
||||
isImposter: boolean;
|
||||
posX: number;
|
||||
posY: number;
|
||||
speedX: number;
|
||||
speedY: number;
|
||||
};
|
||||
|
||||
const amogusWidth = 70;
|
||||
const amogusHeight = 70;
|
||||
|
||||
const { innerWidth: width, innerHeight: height } = window;
|
||||
|
||||
const getImage = (sus: Amogus) => (sus.isImposter ? imposter : amogus);
|
||||
|
||||
const makeInitialCrewmates = (): Amogus[] => {
|
||||
return [
|
||||
makeCrewmate(true),
|
||||
makeCrewmate(false),
|
||||
makeCrewmate(false),
|
||||
makeCrewmate(false),
|
||||
makeCrewmate(false),
|
||||
makeCrewmate(false),
|
||||
makeCrewmate(false),
|
||||
makeCrewmate(false),
|
||||
makeCrewmate(false),
|
||||
];
|
||||
};
|
||||
|
||||
const randNum = (min: number, max: number): number =>
|
||||
Math.random() * (max - min) + min;
|
||||
|
||||
const makeCrewmate = (imposter: boolean): Amogus => ({
|
||||
isImposter: imposter,
|
||||
posX: randNum(0, width - amogusWidth),
|
||||
posY: randNum(0, height - amogusHeight),
|
||||
speedX: Math.random() > 0.5 ? randNum(3, 10) : randNum(-3, -10),
|
||||
speedY: Math.random() > 0.5 ? randNum(3, 10) : randNum(-3, -10),
|
||||
});
|
||||
|
||||
const intersect = (c1: Amogus, c2: Amogus): boolean =>
|
||||
Math.abs(c1.posX - c2.posX) < amogusWidth - 20 &&
|
||||
Math.abs(c1.posY - c2.posY) < amogusHeight - 20;
|
||||
|
||||
const doMove = (crewmates: Amogus[]) =>
|
||||
crewmates.map((c) => ({
|
||||
...c,
|
||||
posX: c.posX + c.speedX,
|
||||
posY: c.posY + c.speedY,
|
||||
}));
|
||||
|
||||
const doCollisionWalls = (crewmates: Amogus[]) =>
|
||||
crewmates.map((c) => {
|
||||
if (c.posX > width - amogusWidth) {
|
||||
return {
|
||||
...c,
|
||||
posX: width - amogusWidth,
|
||||
speedX: c.speedX * -1,
|
||||
};
|
||||
} else if (c.posX < -20) {
|
||||
return { ...c, posX: -20, speedX: c.speedX * -1 };
|
||||
} else if (c.posY > height - amogusHeight) {
|
||||
return {
|
||||
...c,
|
||||
posY: height - amogusHeight,
|
||||
speedY: c.speedY * -1,
|
||||
};
|
||||
} else if (c.posY < -20) {
|
||||
return { ...c, posY: -20, speedY: c.speedY * -1 };
|
||||
} else return c;
|
||||
});
|
||||
|
||||
// TODO: This is ugly
|
||||
const doCollisionOthers = (crewmates: Amogus[]) =>
|
||||
crewmates.map((c) => {
|
||||
const intersections = crewmates
|
||||
.filter((o) => o !== c) // don't collide with yourself pls
|
||||
.filter((o) => intersect(c, o));
|
||||
|
||||
if (intersections.some((o) => Math.abs(o.posX - c.posX) < 50)) {
|
||||
return { ...c, speedX: c.speedX * -1 };
|
||||
}
|
||||
if (intersections.some((o) => Math.abs(o.posY - c.posY) < 50)) {
|
||||
return { ...c, speedY: c.speedY * -1 };
|
||||
}
|
||||
return c;
|
||||
});
|
||||
|
||||
const doKills = (crewmates: Amogus[]) => {
|
||||
const imposters = crewmates.filter((c) => c.isImposter);
|
||||
const alive = crewmates
|
||||
.filter((c) => !c.isImposter)
|
||||
.filter((c) => imposters.every((i) => !intersect(i, c)));
|
||||
return imposters.concat(alive);
|
||||
};
|
||||
|
||||
const checkReset = (crewmates: Amogus[]) =>
|
||||
crewmates.every((c) => c.isImposter) ? makeInitialCrewmates() : crewmates;
|
||||
|
||||
const renderCrewmate = (crewmate: Amogus, key: number) => (
|
||||
<div
|
||||
key={key}
|
||||
className={style.container}
|
||||
style={{ top: crewmate.posY, left: crewmate.posX }}
|
||||
>
|
||||
<img src={getImage(crewmate)} alt="Amogus" />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default function Amogus() {
|
||||
const [crewmates, setCrewmates] = useState(() => makeInitialCrewmates());
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCrewmates((c) => doMove(c));
|
||||
setCrewmates((c) => doCollisionWalls(c));
|
||||
setCrewmates((c) => doCollisionOthers(c));
|
||||
setCrewmates((c) => doKills(c));
|
||||
setCrewmates((c) => checkReset(c));
|
||||
}, 50);
|
||||
return () => {
|
||||
clearInterval(timer);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <>{crewmates.map((c, index) => renderCrewmate(c, index))}</>;
|
||||
}
|
||||
8
src/components/Amogus/style.module.css
Normal file
8
src/components/Amogus/style.module.css
Normal file
@@ -0,0 +1,8 @@
|
||||
.container {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
scale: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -1,11 +1,26 @@
|
||||
import CardHeader from "@/components/CardHeader/CardHeader";
|
||||
|
||||
import style from "./style.module.css";
|
||||
|
||||
export default function Card({
|
||||
active,
|
||||
icon,
|
||||
name,
|
||||
children,
|
||||
active = false,
|
||||
header = true,
|
||||
}: {
|
||||
icon: string;
|
||||
name: string;
|
||||
active?: boolean;
|
||||
header?: boolean;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return <div className={style.card}>{children}</div>;
|
||||
return (
|
||||
<div className={style.card}>
|
||||
{header ? (
|
||||
<CardHeader icon={icon} content={name} active={active} />
|
||||
) : null}
|
||||
<div className={style.cardContent}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
background-color: #c0c0c0;
|
||||
@@ -10,5 +11,6 @@
|
||||
}
|
||||
|
||||
.cardContent {
|
||||
padding: 1px 100px 30px 100px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
9
src/components/CardContainers/CardContainers.tsx
Normal file
9
src/components/CardContainers/CardContainers.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import style from "./style.module.css";
|
||||
|
||||
export function CardRow({ children }) {
|
||||
return <div className={style.cardRow}>{children}</div>;
|
||||
}
|
||||
|
||||
export function CardColumn({ children }) {
|
||||
return <div className={style.cardColumn}>{children}</div>;
|
||||
}
|
||||
16
src/components/CardContainers/style.module.css
Normal file
16
src/components/CardContainers/style.module.css
Normal file
@@ -0,0 +1,16 @@
|
||||
.cardColumn {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.cardRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: 30px;
|
||||
}
|
||||
@@ -1,12 +1,14 @@
|
||||
import classNames from "classnames";
|
||||
|
||||
import style from "./style.module.css";
|
||||
|
||||
export default function CardHeader({ icon, content, active = false }) {
|
||||
let containerClass = style.container;
|
||||
if (active) {
|
||||
containerClass += ` ${style.active}`;
|
||||
}
|
||||
return (
|
||||
<div className={containerClass}>
|
||||
<div
|
||||
className={classNames(style.container, {
|
||||
[`${style.active}`]: active,
|
||||
})}
|
||||
>
|
||||
<div className={style.title}>
|
||||
<div className={style.icon}>{icon}</div>
|
||||
<div className={style.content}>{content}</div>
|
||||
|
||||
@@ -1,13 +1,19 @@
|
||||
import FourTwenty from "@components/FourTwenty/FourTwenty";
|
||||
import classNames from "classnames";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import Amogus from "@/components/Amogus/Amogus";
|
||||
import Card from "@/components/Card/Card";
|
||||
import CardHeader from "@/components/CardHeader/CardHeader";
|
||||
import {
|
||||
CardColumn,
|
||||
CardRow,
|
||||
} from "@/components/CardContainers/CardContainers";
|
||||
import Datetime from "@/components/Datetime/Datetime";
|
||||
import Flatastic from "@/components/Flatastic/Flatastic";
|
||||
import Footer from "@/components/Footer/Footer";
|
||||
import Terminal from "@/components/Terminal/Terminal";
|
||||
import Timetable from "@/components/Timetable/Timetable";
|
||||
import Weather from "../Weather/Weather";
|
||||
import Weather from "@/components/Weather/Weather";
|
||||
|
||||
import style from "./style.module.css";
|
||||
|
||||
export default function Dashboard() {
|
||||
@@ -38,36 +44,38 @@ export default function Dashboard() {
|
||||
|
||||
return (
|
||||
<div className={`${style.dashboard} ${scheme}`}>
|
||||
<div className={style.cardWrapper}>
|
||||
<Card>
|
||||
<CardHeader icon="🚊" content="Timetable" />
|
||||
<Timetable />
|
||||
</Card>
|
||||
<div className={style.clockAndWeather}>
|
||||
<div className={style.small}>
|
||||
<Card>
|
||||
<CardHeader icon="🕐" content="Clock" />
|
||||
<Amogus />
|
||||
<div className={style.body}>
|
||||
<CardColumn>
|
||||
<Card icon="🚊" name="Timetable">
|
||||
<Timetable />
|
||||
</Card>
|
||||
|
||||
<CardRow>
|
||||
<Card icon="🕐" name="Clock">
|
||||
<Datetime />
|
||||
</Card>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader icon="🌤️" content="Weather" />
|
||||
<Weather />
|
||||
</Card>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader icon="🔔" content="Terminal" active={true} />
|
||||
<Terminal />
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader icon="🧹" content="Flatastic" />
|
||||
<Flatastic />
|
||||
</Card>
|
||||
</div>
|
||||
<div className={style.footer}>
|
||||
<Footer />
|
||||
<Card icon="🌤" name="Weather">
|
||||
<Weather />
|
||||
</Card>
|
||||
|
||||
<Card icon="🍁" name="420">
|
||||
<FourTwenty />
|
||||
</Card>
|
||||
</CardRow>
|
||||
|
||||
<Card icon="🔔" name="Terminal" active={true}>
|
||||
<Terminal />
|
||||
</Card>
|
||||
|
||||
<Card icon="🧹" name="Flatastic">
|
||||
<Flatastic />
|
||||
</Card>
|
||||
</CardColumn>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,6 +5,12 @@
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.body {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
/* 7 to 16 */
|
||||
.day {
|
||||
background-color: #007c7d;
|
||||
@@ -19,29 +25,3 @@
|
||||
.night {
|
||||
background-color: #2a3f55;
|
||||
}
|
||||
|
||||
.clockAndWeather {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cardWrapper {
|
||||
margin: 30px;
|
||||
height: 100%;
|
||||
gap: 30px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.small {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import clockImage from "/img/clock.png"
|
||||
import clockImage from "/img/clock.png";
|
||||
|
||||
import style from "./style.module.css";
|
||||
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
import weedImage from "/img/weed.png";
|
||||
import style from "./style.module.css";
|
||||
|
||||
import weedImage from "/img/weed.png"
|
||||
|
||||
export default function Footer() {
|
||||
|
||||
|
||||
return (
|
||||
<div className={style.container}>
|
||||
<div className={style.taskbar}>
|
||||
@@ -29,6 +26,9 @@ export default function Footer() {
|
||||
<span className={style.window}>
|
||||
<span className={style.windowIcon}>🧹</span>Flatastic
|
||||
</span>
|
||||
<span className={style.window}>
|
||||
<span className={style.windowIcon}>⛅</span>Weather
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
.container {
|
||||
background-color: #c0c0c0;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.taskbar {
|
||||
|
||||
37
src/components/FourTwenty/FourTwenty.tsx
Normal file
37
src/components/FourTwenty/FourTwenty.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import style from "./style.module.css";
|
||||
|
||||
// function Timer({ hours, minutes }: { hours: number; minutes: number }) {
|
||||
// const x = hours > 0 ? `${hours}h ` : "";
|
||||
// const y = minutes > 0 ? `${minutes % 60}m` : "";
|
||||
|
||||
// return (
|
||||
// <div>
|
||||
// <p>
|
||||
// {x}
|
||||
// {y}
|
||||
// </p>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
// function FourTwentyLoading() {}
|
||||
|
||||
function FourTwentySmoking() {
|
||||
return (
|
||||
<div className={style.container}>
|
||||
<img
|
||||
className={style.image}
|
||||
src="https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExMjFlYnhzYzJnc3ZzejBnOGZzcHFpNGpxOHNrN2dwcnZ3NmZ2eWJ0dyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5xaOcLRnsWIB0CkfE3u/giphy.gif"
|
||||
alt="Smoking"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function FourTwenty() {
|
||||
return (
|
||||
<div>
|
||||
<FourTwentySmoking />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
5
src/components/FourTwenty/style.module.css
Normal file
5
src/components/FourTwenty/style.module.css
Normal file
@@ -0,0 +1,5 @@
|
||||
.container img {
|
||||
all: unset;
|
||||
object-fit: contain;
|
||||
width: 200px;
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
.container {
|
||||
padding: 1px 100px 30px 100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import path from "node:path";
|
||||
import react from "@vitejs/plugin-react-swc";
|
||||
import { defineConfig } from "vite";
|
||||
import mkcert from 'vite-plugin-mkcert'
|
||||
import mkcert from "vite-plugin-mkcert";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react(), mkcert()],
|
||||
|
||||
Reference in New Issue
Block a user