Skip to content

Feat/buttons #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Lav-Sen wants to merge 3 commits into
base: main
Choose a base branch
from
+32 −41
Open

Feat/buttons #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
01658ea
prettier buttons
Lav-Sen Dec 22, 2025
dd2f603
prettier buttons finish
Lav-Sen Dec 22, 2025
67d8a46
improve import
Lav-Sen Dec 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 5 additions & 13 deletions docs/boards/mcu/mcu-overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ hide_title: true
import mcus2top from "@site/static/img/mcus2/mcus2top.png";
import AlertBox from "@site/src/components/AlertBox/AlertBox";
import mcuPorts from "@site/static/img/mcu/sensebox-mcu-ports.png";
import ButtonWithText from "@site/src/components/ButtonWithText/ButtonWithText";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@site/src/components/ui/popover";
import lightSensor from "@site/static/img/hardware-bilder/helligkeit-uv/sensor_helligkeit_uv.png";
import display from "@site/static/img/hardware-bilder/oled/display.png";
Expand Down Expand Up @@ -46,9 +46,7 @@ Klicke auf die unten stehenden Anschlüsse um zu sehen welcher Sensor dort anges

<div className="flex flex-row justify-evenly">
<Popover>
<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
I2C/Wire Anschlüsse
</PopoverTrigger>
<ButtonWithText title="I2C/Wire Ports" />
<PopoverContent>
<div>
<h2>Sensoren und Zubehör an den I2C/Wire Anschlüssen</h2>
Expand Down Expand Up @@ -114,9 +112,7 @@ Klicke auf die unten stehenden Anschlüsse um zu sehen welcher Sensor dort anges
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
UART/Serielle Anschlüsse
</PopoverTrigger>
<ButtonWithText title="UART/Serielle Anschlüsse" />
<PopoverContent>
<div className="flex flex-col lg:flex-row">
<div className="flex flex-col items-center">
Expand All @@ -139,9 +135,7 @@ Klicke auf die unten stehenden Anschlüsse um zu sehen welcher Sensor dort anges
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
Digitale/Analoge Anschlüsse
</PopoverTrigger>
<ButtonWithText title="Digitale/Analoge Anschlüsse" />
<PopoverContent>
<div className="flex flex-col lg:flex-row">
<div className="flex flex-col items-center">
Expand Down Expand Up @@ -172,9 +166,7 @@ Klicke auf die unten stehenden Anschlüsse um zu sehen welcher Sensor dort anges
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
XBEE
</PopoverTrigger>
<ButtonWithText title="XBEE" />
<PopoverContent>
<div className="flex flex-col lg:flex-row">
<div className="flex flex-col items-center">
Expand Down
10 changes: 3 additions & 7 deletions docs/boards/mcus2/mcu-s2-overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Admonition from "@theme/Admonition";
import React, { useState } from "react";
import { motion } from "framer-motion";
import image from "@site/static/img/mcus2/mcus2top.png";
import ButtonWithText from "@site/src/components/ButtonWithText/ButtonWithText";
import {
Tooltip,
TooltipContent,
Expand All @@ -16,7 +17,6 @@ import {
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@site/src/components/ui/popover";
import { Button } from "@site/src/components/ui/button";
import mcus2ports from "@site/static/img/mcus2/mcus2-ports.png";
Expand Down Expand Up @@ -45,9 +45,7 @@ import mcus2top from "@site/static/img/mcus2/mcus2top.png";
<h1 className="text-left"> Anschlüsse </h1>
<div className="flex flex-row justify-evenly">
<Popover>
<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
I2C/Wire Ports
</PopoverTrigger>
<ButtonWithText title="I2C/Wire Ports" />
<PopoverContent>
<div>
<h2>Sensoren und Accessoire an den I2C/Wire Ports</h2>
Expand Down Expand Up @@ -97,9 +95,7 @@ import mcus2top from "@site/static/img/mcus2/mcus2top.png";
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
Digital/Analog Ports
</PopoverTrigger>
<ButtonWithText title="Digital/Analog Ports" />
<PopoverContent>
<div>
<h2>Sensoren und Accessoire an den Digital/Analog Ports</h2>
Expand Down
20 changes: 6 additions & 14 deletions i18n/en/docusaurus-plugin-content-docs/current/boards/mcu/mcu-overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ hide_title: true

import mcus2top from "@site/static/img/mcus2/mcus2top.png";
import AlertBox from "@site/src/components/AlertBox/AlertBox";
import ButtonWithText from "@site/src/components/ButtonWithText/ButtonWithText";
import mcuPorts from "@site/static/img/en/mcu/sensebox-mcu-ports.jpg";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@site/src/components/ui/popover";
import lightSensor from "@site/static/img/hardware-bilder/helligkeit-uv/sensor_helligkeit_uv.png";
import display from "@site/static/img/hardware-bilder/oled/display.png";
Expand Down Expand Up @@ -48,10 +48,8 @@ import Admonition from '@theme/Admonition';
Click on the ports below to see which sensor is connected there.
<div className="flex flex-row justify-evenly">
<Popover>
<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
I2C/Wire Ports
</PopoverTrigger>
<PopoverContent>
<ButtonWithText title="I2C/Wire Ports" />
<PopoverContent>
<div>
<h2>Sensoren und Accessoire an den I2C/Wire Ports</h2>
<div className="flex flex-col lg:flex-row">
Expand Down Expand Up @@ -116,9 +114,7 @@ Click on the ports below to see which sensor is connected there.
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
UART/Serial port
</PopoverTrigger>
<ButtonWithText title="UART/Serielle Anschlüsse" />
<PopoverContent>
<div className="flex flex-col lg:flex-row">
<div className="flex flex-col items-center">
Expand All @@ -141,9 +137,7 @@ Click on the ports below to see which sensor is connected there.
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
Digital/Analogue ports
</PopoverTrigger>
<ButtonWithText title="Digitale/Analoge Anschlüsse" />
<PopoverContent>
<div className="flex flex-col lg:flex-row">
<div className="flex flex-col items-center">
Expand Down Expand Up @@ -174,9 +168,7 @@ Click on the ports below to see which sensor is connected there.
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger className="flex cursor-pointer bg-white dark:bg-gray-800 text-black dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md w-[10rem] p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
XBEE
</PopoverTrigger>
<ButtonWithText title="XBEE" />
<PopoverContent>
<div className="flex flex-col lg:flex-row">
<div className="flex flex-col items-center">
Expand Down
10 changes: 3 additions & 7 deletions i18n/en/docusaurus-plugin-content-docs/current/boards/mcus2/mcu-s2-overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Admonition from "@theme/Admonition";
import React, { useState } from "react";
import { motion } from "framer-motion";
import image from "@site/static/img/mcus2/mcus2top.png";
import ButtonWithText from "@site/src/components/ButtonWithText/ButtonWithText";
import {
Tooltip,
TooltipContent,
Expand All @@ -16,7 +17,6 @@ import {
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@site/src/components/ui/popover";
import { Button } from "@site/src/components/ui/button";
import mcus2ports from "@site/static/img/en/mcus2/mcus2-ports.png";
Expand All @@ -43,9 +43,7 @@ import mcus2top from "@site/static/img/mcus2/mcus2top.png";
<h1 className="text-left"> Ports </h1>
<div className="flex flex-row justify-evenly">
<Popover>
<PopoverTrigger className="flex cursor-pointer bg-white border-solid border-1 rounded-md w-[10rem] p-2 hover:bg-gray-100">
I2C/Wire ports
</PopoverTrigger>
<ButtonWithText title="I2C/Wire ports" />
<PopoverContent>
<div>
<h2>Sensors and accessories on the I2C/Wire ports</h2>
Expand Down Expand Up @@ -95,9 +93,7 @@ import mcus2top from "@site/static/img/mcus2/mcus2top.png";
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger className="cursor-pointer bg-white border-solid border-1 rounded-md w-[10rem] p-2 hover:bg-gray-100">
Digital/Analogue ports
</PopoverTrigger>
<ButtonWithText title="Digital/Analogue ports" />
<PopoverContent>
<div>
<h2>Sensors and accessories on the digital/analogue ports</h2>
Expand Down
15 changes: 15 additions & 0 deletions src/components/ButtonWithText/ButtonWithText.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { PopoverTrigger } from "@radix-ui/react-popover";

const ButtonWithText = ({ title, ...props }) => (
<PopoverTrigger asChild>
<button
type="button"
className="bg-gradient-to-r from-green to-green hover:from-green-2 hover:to-green-2 text-white font-medium py-3 px-6 rounded-xl shadow-lg transition-all duration-300 ease-in-out"
{...props}
>
{title}
</button>
</PopoverTrigger>
);

export default ButtonWithText;