client: added a new borderRadius input field

Author: 0l1v3rr

README.md

@@ -59,6 +59,7 @@ We suggest not editing the query parameters manually, use [our website](https://
 | **theme** | `?theme=github_dark` | github | The theme of the card. You can browse between the themes [here](#-themes). |
 | **align** | `?align=center` | left | The alignment of the badges. (`left`, `center`, `right`) |
 | **showBorder** | `?showBorder=false` | true | Display the border around the card or not. (`true`, `false`) |
+| **borderRadius** | `?borderRadius=12.5` | 4.5 | Value between 0 and 50. |
 | **lineCount** | `?lineCount=2` | 1 | The number of lines you want to add to your card. |
 | **line{n}** | `?line1=typescript,typescript,2D79C7` | - | The current line of the badge, where {n} is a number. *`(1 <= n <= lineCount)`* |
 

client/build/asset-manifest.json

@@ -30,3 +30,8 @@ export const linesState = atom({
   key: "lines",
   default: [] as Line[],
 });
+
+export const borderRadiusState = atom({
+  key: "borderRadius",
+  default: "4.5",
+});

client/build/index.html

@@ -7,6 +7,7 @@ import GreenButton from "../components/buttons/GreenButton";
 import { useRecoilState } from "recoil";
 import {
   alignState,
+  borderRadiusState,
   borderState,
   lineCountState,
   linesState,
@@ -35,6 +36,7 @@ const Options: FC<OptionsProps> = (props) => {
   const [align, setAlign] = useRecoilState(alignState);
   const [lines, setLines] = useRecoilState(linesState);
   const [showBorder, setShowBorder] = useRecoilState(borderState);
+  const [borderRadius, setBorderRadius] = useRecoilState(borderRadiusState);
 
   useEffect(() => {
     // create an array with the numbers of lineCount to 1
@@ -112,6 +114,13 @@ const Options: FC<OptionsProps> = (props) => {
           value={showBorder}
         />
 
+        <Input
+          label="Border radius"
+          placeholder="4.5"
+          value={borderRadius}
+          setValue={setBorderRadius}
+        />
+
         <div className="w-[92%] h-[.8px] bg-gh-border mx-auto" />
 
         {lineChars.map((line) => (
@@ -122,7 +131,15 @@ const Options: FC<OptionsProps> = (props) => {
           icon={IoHammerOutline}
           onClick={() => {
             props.setLink(
-              generateLink(title, lineCount, theme, align, lines, showBorder)
+              generateLink(
+                title,
+                lineCount,
+                theme,
+                align,
+                lines,
+                showBorder,
+                borderRadius
+              )
             );
           }}
           disabled={false}

client/build/static/js/main.9a4f379f.js client/build/static/js/main.2447a062.jsclient/build/static/js/main.9a4f379f.js renamed to client/build/static/js/main.2447a062.js

@@ -6,12 +6,13 @@ export const generateLink = (
   theme: string,
   align: string,
   lines: Line[],
-  showBorder: boolean
+  showBorder: boolean,
+  borderRadius: string
 ): string => {
   // replace every space with %20
   title = title.replace(/[ ]/g, "%20");
 
-  let res = `https://github-readme-tech-stack.vercel.app/api/cards?title=${title}&lineCount=${lineCount}&theme=${theme}&align=${align}&showBorder=${showBorder}`;
+  let res = `https://github-readme-tech-stack.vercel.app/api/cards?title=${title}&lineCount=${lineCount}&theme=${theme}&align=${align}&showBorder=${showBorder}&borderRadius=${borderRadius}`;
 
   for (const l of lines) {
     // if the line doesn't contain badges

…d/static/js/main.9a4f379f.js.LICENSE.txt …d/static/js/main.2447a062.js.LICENSE.txtclient/build/static/js/main.9a4f379f.js.LICENSE.txt renamed to client/build/static/js/main.2447a062.js.LICENSE.txt client/build/static/js/main.9a4f379f.js.LICENSE.txt renamed to client/build/static/js/main.2447a062.js.LICENSE.txt

@@ -77,4 +77,3 @@ export default class Card {
     this.borderRadius = borderRadius;
   };
 }
-