Final bits and pieces

haslo · Sep 24, 2024 · 5721a1c · 5721a1c
1 parent 322a334
commit 5721a1c
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -19,7 +19,7 @@
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="manifest" href="/manifest.json" />
     <script type="module" src="/src/index.jsx"></script>
-    <title>haslo.ch - Homegrown Techno from Bern, Switzerland</title>
+    <title>haslo.ch - Techno and Plugins from Bern, Switzerland</title>
   </head>
   <body>
     <!-- hallo musti -->

diff --git a/src/pages/plugins/Destruktor.jsx b/src/pages/plugins/Destruktor.jsx
@@ -1,11 +1,16 @@
 import * as React from "react";
 
 import {Box, CardMedia, Typography} from "@mui/material";
+import {PriceStamp} from "./PriceStamp";
 
 export function Destruktor({plugin_link}) {
   return (
     <>
       <Box sx={{position: 'relative', marginBottom: '30px'}}>
+        <PriceStamp
+          color={'#243667'}
+          price={'$10'}
+        />
         <a href={plugin_link}>
           <CardMedia
             component="img"

diff --git a/src/pages/plugins/Haaschen.jsx b/src/pages/plugins/Haaschen.jsx
@@ -2,13 +2,16 @@ import * as React from "react";
 
 import {Box, CardMedia, Typography} from "@mui/material";
 
-import {FreeStamp} from "./FreeStamp";
+import {PriceStamp} from "./PriceStamp";
 
 export function Haaschen({plugin_link}) {
   return (
     <>
       <Box sx={{position: 'relative', marginBottom: '30px'}}>
-        <FreeStamp/>
+        <PriceStamp
+          color={'#f50057'}
+          price={'FREE'}
+        />
         <a href={plugin_link}>
           <CardMedia
             component="img"

diff --git a/src/pages/plugins/Ploink.jsx b/src/pages/plugins/Ploink.jsx
@@ -2,13 +2,16 @@ import * as React from "react";
 
 import {Box, CardMedia, Typography} from "@mui/material";
 
-import {FreeStamp} from "./FreeStamp";
+import {PriceStamp} from "./PriceStamp";
 
 export function Ploink({plugin_link}) {
   return (
     <>
       <Box sx={{position: 'relative', marginBottom: '30px'}}>
-        <FreeStamp/>
+        <PriceStamp
+          color={'#f50057'}
+          price={'FREE'}
+        />
         <a href={plugin_link}>
           <CardMedia
             component="img"

diff --git a/src/pages/plugins/FreeStamp.jsx → src/pages/plugins/PriceStamp.jsx b/src/pages/plugins/FreeStamp.jsx → src/pages/plugins/PriceStamp.jsx
@@ -2,15 +2,15 @@ import * as React from "react";
 
 import {Box, Typography} from "@mui/material";
 
-export function FreeStamp() {
+export function PriceStamp({color, price}) {
   return (
     <>
       <Box
         sx={{
           position: 'absolute',
           top: 10,
           right: 10,
-          backgroundColor: '#f50057',
+          backgroundColor: color,
           color: 'white',
           borderRadius: '50%',
           width: 80,
@@ -19,7 +19,7 @@ export function FreeStamp() {
           justifyContent: 'center',
           alignItems: 'center',
           transform: 'rotate(15deg)',
-          boxShadow: '0 0 0 5px #f50057',
+          boxShadow: `0 0 0 5px ${color}`,
           '&::before': {
             content: '""',
             position: 'absolute',
@@ -33,7 +33,7 @@ export function FreeStamp() {
         }}
       >
         <Typography variant="subtitle1" fontWeight="bold">
-          FREE
+          {price}
         </Typography>
       </Box>
     </>

diff --git a/src/shared/SearchAppBar.jsx b/src/shared/SearchAppBar.jsx
@@ -68,7 +68,7 @@ export function SearchAppBar({setSearchQuery, searchEventSent, setSearchEventSen
             sx={{flexGrow: 1, display: {xs: 'block', sm: 'block'}}}
           >
             <a href='/public' style={{textDecoration: 'none', color: 'white'}}>
-              haslo.ch - Homegrown Techno from Bern, Switzerland
+              haslo.ch - Techno and Plugins from Bern, Switzerland
             </a>
           </Typography>
           {searchIsPending ? <CircularProgress/> : <></>}