@@ -50,29 +55,46 @@ const FormWrapper = ({ title, children, className, ...props }: Props) => {
+ updateCard({
+ ...card,
+ lines: Array.from({ length: value }).map((_, i) => ({
+ lineNumber: i + 1,
+ badges: [],
+ })),
+ })
+ }
+ />
+ )}
);
diff --git a/src/components/form/LineCountAdjuster.tsx b/src/components/form/LineCountAdjuster.tsx
new file mode 100644
index 00000000..6d26c546
--- /dev/null
+++ b/src/components/form/LineCountAdjuster.tsx
@@ -0,0 +1,40 @@
+import Button from "@/components/ui/Button";
+import Input from "@/components/ui/Input";
+import React, { useState } from "react";
+
+interface LineCountAdjusterProps {
+ initialCount: number;
+ onChange: (value: number) => void;
+}
+
+const LineCountAdjuster: React.FC
= ({
+ initialCount,
+ onChange,
+}) => {
+ const [showInput, setShowInput] = useState(false);
+
+ return (
+ <>
+ setShowInput(!showInput)}
+ variant="secondary"
+ size="small"
+ >
+ Lines
+
+ {showInput && (
+
updateCard({ align: val.value })}
options={[
{ label: "left", value: "left" },
{ label: "center", value: "center" },
{ label: "right", value: "right" },
]}
- label="Badges Align"
- selected={{ value: card.align, label: card.align }}
- select={(val) => updateCard({ align: val.value })}
/>
@@ -79,7 +79,7 @@ const PageFive = () => {
-
+
If you change the Lines parameter, your previously set lines will be
reset.
diff --git a/client/src/components/form/PageFour.tsx b/src/components/form/PageFour.tsx
similarity index 84%
rename from client/src/components/form/PageFour.tsx
rename to src/components/form/PageFour.tsx
index b8a69ed9..7248752d 100644
--- a/client/src/components/form/PageFour.tsx
+++ b/src/components/form/PageFour.tsx
@@ -1,9 +1,9 @@
-import { useMultistepContext } from "../../hooks/useMultistepContext";
-import Flex from "../layout/Flex";
-import FormWrapper from "../ui/FormWrapper";
-import Input from "../ui/Input";
-import InputWrapper from "../ui/InputWrapper";
-import TrueFalseInput from "../ui/TrueFalseInput";
+import FormWrapper from "@/components/form/FormWrapper";
+import Flex from "@/components/layout/Flex";
+import Input from "@/components/ui/Input";
+import InputWrapper from "@/components/ui/InputWrapper";
+import TrueFalseInput from "@/components/ui/TrueFalseInput";
+import { useMultistepContext } from "@/hooks/useMultistepContext";
const PageFour = () => {
const { card, updateCard } = useMultistepContext();
diff --git a/client/src/components/form/PageOne.tsx b/src/components/form/PageOne.tsx
similarity index 67%
rename from client/src/components/form/PageOne.tsx
rename to src/components/form/PageOne.tsx
index e0b6f966..a7ac3b52 100644
--- a/client/src/components/form/PageOne.tsx
+++ b/src/components/form/PageOne.tsx
@@ -1,6 +1,5 @@
-import FormWrapper from "../ui/FormWrapper";
-import Link from "../ui/Link";
-import P from "../ui/P";
+import FormWrapper from "@/components/form/FormWrapper";
+import P from "@/components/ui/P";
const PageOne = () => {
return (
@@ -9,21 +8,16 @@ const PageOne = () => {
className="items-center"
>
+
This website allows you to easily customize and preview your README card
in live. You can play around with the different settings so you don't
have to write the query parameters manually.
-
-
-
- You can find an example card above. It's in my{" "}
-
);
diff --git a/src/components/form/PageSeven.tsx b/src/components/form/PageSeven.tsx
new file mode 100644
index 00000000..625258fd
--- /dev/null
+++ b/src/components/form/PageSeven.tsx
@@ -0,0 +1,33 @@
+import CodeWrapper from "@/components/form/CodeWrapper";
+import FormWrapper from "@/components/form/FormWrapper";
+import CodeBlock from "@/components/ui/CodeBlock";
+import { useCardUrl } from "@/hooks/useCardUrl";
+import { useMultistepContext } from "@/hooks/useMultistepContext";
+
+const PageSeven = () => {
+ const { card } = useMultistepContext();
+ const url = useCardUrl();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default PageSeven;
diff --git a/client/src/components/form/PageSix.tsx b/src/components/form/PageSix.tsx
similarity index 55%
rename from client/src/components/form/PageSix.tsx
rename to src/components/form/PageSix.tsx
index f4c5b645..7d19e071 100644
--- a/client/src/components/form/PageSix.tsx
+++ b/src/components/form/PageSix.tsx
@@ -1,8 +1,8 @@
-import { useMultistepContext } from "../../hooks/useMultistepContext";
-import LineItem from "../lines/LineItem";
-import FormWrapper from "../ui/FormWrapper";
-import P from "../ui/P";
-import Quote from "../ui/Quote";
+import FormWrapper from "@/components/form/FormWrapper";
+import LineItem from "@/components/lines/LineItem";
+import P from "@/components/ui/P";
+import Quote from "@/components/ui/Quote";
+import { useMultistepContext } from "@/hooks/useMultistepContext";
const PageSix = () => {
const { card } = useMultistepContext();
@@ -11,10 +11,11 @@ const PageSix = () => {
On this page you can customize the most important part of the card: the
- badges. You set the number of lines you want on the previous page.
+ badges. You have already set the number of lines you want on the
+ previous page.
-
+
You can drag and drop the badges to rearrange them or double-click to
delete them.
diff --git a/client/src/components/form/PageThree.tsx b/src/components/form/PageThree.tsx
similarity index 77%
rename from client/src/components/form/PageThree.tsx
rename to src/components/form/PageThree.tsx
index a7ba530f..3556438b 100644
--- a/client/src/components/form/PageThree.tsx
+++ b/src/components/form/PageThree.tsx
@@ -1,9 +1,9 @@
-import { useMultistepContext } from "../../hooks/useMultistepContext";
-import Flex from "../layout/Flex";
-import FormWrapper from "../ui/FormWrapper";
-import Input from "../ui/Input";
-import InputWrapper from "../ui/InputWrapper";
-import Select from "../ui/Select";
+import FormWrapper from "@/components/form/FormWrapper";
+import Flex from "@/components/layout/Flex";
+import Input from "@/components/ui/Input";
+import InputWrapper from "@/components/ui/InputWrapper";
+import Select from "@/components/ui/Select";
+import { useMultistepContext } from "@/hooks/useMultistepContext";
const PageThree = () => {
const { card, updateCard } = useMultistepContext();
@@ -38,28 +38,28 @@ const PageThree = () => {
updateCard({ fontWeight: val.value })}
+ label="Font Weight"
options={[
{ label: "thin", value: "thin" },
{ label: "normal", value: "normal" },
{ label: "semibold", value: "semibold" },
{ label: "bold", value: "bold" },
]}
- label="Font Weight"
- selected={{ value: card.fontWeight, label: card.fontWeight }}
- select={(val) => updateCard({ fontWeight: val.value })}
/>
updateCard({ titleAlign: val.value })}
+ label="Text Align"
options={[
{ label: "left", value: "left" },
{ label: "center", value: "center" },
{ label: "right", value: "right" },
]}
- label="Text Align"
- selected={{ value: card.titleAlign, label: card.titleAlign }}
- select={(val) => updateCard({ titleAlign: val.value })}
/>
diff --git a/src/components/form/PageTwo.tsx b/src/components/form/PageTwo.tsx
new file mode 100644
index 00000000..b966d7b3
--- /dev/null
+++ b/src/components/form/PageTwo.tsx
@@ -0,0 +1,122 @@
+import FormWrapper from "@/components/form/FormWrapper";
+import Flex from "@/components/layout/Flex";
+import Button from "@/components/ui/Button";
+import ColorInput from "@/components/ui/ColorInput";
+import Hr from "@/components/ui/Hr";
+import InputWrapper from "@/components/ui/InputWrapper";
+import Link from "@/components/ui/Link";
+import P from "@/components/ui/P";
+import Quote from "@/components/ui/Quote";
+import Select from "@/components/ui/Select";
+import { useMultistepContext } from "@/hooks/useMultistepContext";
+import { useThemes } from "@/hooks/useThemes";
+import { Theme } from "@/types";
+import axios from "axios";
+import { useCallback } from "react";
+
+const PageTwo = () => {
+ const themes = useThemes();
+ const { card, updateCard } = useMultistepContext();
+
+ const loadColors = useCallback(() => {
+ axios
+ .get(
+ `https://github-readme-tech-stack.vercel.app/api/themes/${card.theme}`
+ )
+ .then((res) =>
+ updateCard({
+ backgroundColor: res.data.backgroundColor,
+ borderColor: res.data.borderColor,
+ titleColor: res.data.titleColor,
+ badgeColor: res.data.badgeColor,
+ })
+ );
+ }, [card.theme, updateCard]);
+
+ return (
+
+
+ We have tons of ready-made themes you can use. The themes are available{" "}
+
+
+
+ updateCard({ theme: val.value })}
+ className="w-[60%]"
+ options={themes.map((theme) => ({
+ label: theme,
+ value: theme,
+ }))}
+ />
+
+ Load Colors
+
+
+
+ If none of these themes suits your needs, you can customize them below.
+ By clicking the "Load Colors" button above, the colors of the selected
+ theme will be loaded into the input fields below.
+
+
+
+
+ updateCard({ backgroundColor: e.target.value })}
+ onColorChange={(c) => updateCard({ backgroundColor: c })}
+ />
+
+
+
+ updateCard({ borderColor: e.target.value })}
+ onColorChange={(c) => updateCard({ borderColor: c })}
+ />
+
+
+
+
+
+ updateCard({ titleColor: e.target.value })}
+ onColorChange={(c) => updateCard({ titleColor: c })}
+ />
+
+
+
+ updateCard({ badgeColor: e.target.value })}
+ onColorChange={(c) => updateCard({ badgeColor: c })}
+ />
+
+
+
+
+ These values will override the selected theme's value!
+
+
+ );
+};
+
+export default PageTwo;
diff --git a/src/components/layout/Flex.tsx b/src/components/layout/Flex.tsx
new file mode 100644
index 00000000..2f90fd3f
--- /dev/null
+++ b/src/components/layout/Flex.tsx
@@ -0,0 +1,14 @@
+import { cn } from "@/lib/utils/cn";
+import { ElementType, ReactNode } from "react";
+
+type Props = {
+ children: ReactNode;
+ className?: string;
+ variant?: ElementType;
+};
+
+const Flex = ({ children, className, variant: Tag = "div" }: Props) => (
+ {children}
+);
+
+export default Flex;
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
new file mode 100644
index 00000000..4e0d44bf
--- /dev/null
+++ b/src/components/layout/Header.tsx
@@ -0,0 +1,19 @@
+import RepositoryLink from "@/components/ui/RepositoryLink";
+
+const Header = () => {
+ return (
+
+ );
+};
+
+export default Header;
diff --git a/client/src/components/layout/Main.tsx b/src/components/layout/Main.tsx
similarity index 83%
rename from client/src/components/layout/Main.tsx
rename to src/components/layout/Main.tsx
index e2a0650f..5bd95a7b 100644
--- a/client/src/components/layout/Main.tsx
+++ b/src/components/layout/Main.tsx
@@ -1,5 +1,5 @@
+import { cn } from "@/lib/utils/cn";
import { ReactNode } from "react";
-import { twMerge } from "tailwind-merge";
type Props = {
children: ReactNode;
@@ -9,7 +9,7 @@ type Props = {
const Main = ({ children, className }: Props) => {
return (
void;
+ onBadgeRemoval: (position: number) => void;
};
-const BadgeItem = ({ badge, removeBadge, lineNumber }: Props) => {
+const BadgeItem = ({ badge, onBadgeRemoval, lineNumber }: Props) => {
const [dragged, setDragged] = useState(false);
- const { setGrabbedBadge, grabbedBadge } = useMultistepContext();
+ const { grabbedBadge, setGrabbedBadge } = useMultistepContext();
const handleDragStart = useCallback(
(e: React.DragEvent) => {
@@ -31,7 +31,7 @@ const BadgeItem = ({ badge, removeBadge, lineNumber }: Props) => {
setTimeout(() => setDragged(true), 0);
},
- [lineNumber, badge]
+ [lineNumber, badge, setGrabbedBadge]
);
return (
@@ -51,7 +51,7 @@ const BadgeItem = ({ badge, removeBadge, lineNumber }: Props) => {
onClick={(e) => {
// double click
if (e.detail === 2) {
- removeBadge(badge.position);
+ onBadgeRemoval(badge.position);
}
}}
>
@@ -63,9 +63,9 @@ const BadgeItem = ({ badge, removeBadge, lineNumber }: Props) => {
src={
badge.icon.startsWith("data:image")
? badge.icon
- : `https://cdn.simpleicons.org/${encodeURI(badge.icon)}/${
- badge.color === "auto" ? "" : badge.color.replace("#", "")
- }`
+ : `https://cdn.simpleicons.org/${encodeURI(
+ badge.icon
+ )}/${badge.color.replace("#", "")}`
}
/>
@@ -79,3 +79,4 @@ const BadgeItem = ({ badge, removeBadge, lineNumber }: Props) => {
};
export default BadgeItem;
+
diff --git a/client/src/components/lines/BadgePlaceholder.tsx b/src/components/lines/BadgePlaceholder.tsx
similarity index 79%
rename from client/src/components/lines/BadgePlaceholder.tsx
rename to src/components/lines/BadgePlaceholder.tsx
index 2b266e51..8c9ab772 100644
--- a/client/src/components/lines/BadgePlaceholder.tsx
+++ b/src/components/lines/BadgePlaceholder.tsx
@@ -1,6 +1,6 @@
+import { useMultistepContext } from "@/hooks/useMultistepContext";
+import { cn } from "@/lib/utils/cn";
import { useCallback, useState } from "react";
-import { useMultistepContext } from "../../hooks/useMultistepContext";
-import { cn } from "../ui/utils";
type Props = {
lineNumber: number;
@@ -42,7 +42,7 @@ const BadgePlaceholder = ({ lineNumber, position }: Props) => {
setGrabbedBadge(undefined);
setHovered(false);
},
- [grabbedBadge, insertBadge, lineNumber, position]
+ [grabbedBadge, insertBadge, lineNumber, position, setGrabbedBadge]
);
return (
@@ -54,11 +54,15 @@ const BadgePlaceholder = ({ lineNumber, position }: Props) => {
className={cn(
"h-[31.73px] border-gh-bg",
hovered ? "border-l-[.5rem] bg-gh-bg-dark" : "bg-transparent",
- grabbedBadge && grabbedBadge.badge.position + 1 === position
+ grabbedBadge &&
+ grabbedBadge.lineNumber === lineNumber &&
+ grabbedBadge.badge.position + 1 === position
? ""
: "border-r-[.5rem]"
)}
style={{
+ // if there is a currently grabbed badge and this placeholder is hovered,
+ // then we increase its width, otherwise it's set to 0.
width:
hovered && grabbedBadge
? `calc(${grabbedBadge.badgeWidth}px + 1rem)`
diff --git a/client/src/components/lines/LineItem.tsx b/src/components/lines/LineItem.tsx
similarity index 74%
rename from client/src/components/lines/LineItem.tsx
rename to src/components/lines/LineItem.tsx
index 94ad6520..6dd31187 100644
--- a/client/src/components/lines/LineItem.tsx
+++ b/src/components/lines/LineItem.tsx
@@ -1,9 +1,9 @@
-import { useMultistepContext } from "../../hooks/useMultistepContext";
-import { Line } from "../../types";
-import { formatNumberWord } from "../ui/utils";
-import BadgeItem from "./BadgeItem";
-import BadgePlaceholder from "./BadgePlaceholder";
-import NewBadge from "./NewBadge";
+import BadgeItem from "@/components/lines/BadgeItem";
+import BadgePlaceholder from "@/components/lines/BadgePlaceholder";
+import NewBadge from "@/components/lines/NewBadge";
+import { useMultistepContext } from "@/hooks/useMultistepContext";
+import { formatNumberWord } from "@/lib/utils/format";
+import { Line } from "@/types";
import React from "react";
type Props = {
@@ -35,7 +35,7 @@ const LineItem = ({ line }: Props) => {
removeBadge(line.lineNumber, p)}
+ onBadgeRemoval={(p) => removeBadge(line.lineNumber, p)}
/>
{
)}
- addBadge(line.lineNumber, badge)} />
+ addBadge(line.lineNumber, badge)} />
diff --git a/client/src/components/lines/NewBadge.tsx b/src/components/lines/NewBadge.tsx
similarity index 57%
rename from client/src/components/lines/NewBadge.tsx
rename to src/components/lines/NewBadge.tsx
index 62894edd..c4692fdc 100644
--- a/client/src/components/lines/NewBadge.tsx
+++ b/src/components/lines/NewBadge.tsx
@@ -1,20 +1,22 @@
-import InputWrapper from "../ui/InputWrapper";
-import Input from "../ui/Input";
-import { Badge } from "../../types";
-import Button from "../ui/Button";
+import SvgInput from "@/components/lines/SvgInput";
+import Upload from "@/components/lines/Upload";
+import Button from "@/components/ui/Button";
+import ColorInput from "@/components/ui/ColorInput";
+import Input from "@/components/ui/Input";
+import InputWrapper from "@/components/ui/InputWrapper";
+import PopupContainer from "@/components/ui/PopupContainer";
+import { Badge } from "@/types";
+import { useCallback, useState } from "react";
import { GoPlus } from "react-icons/go";
-import ColorInput from "../ui/ColorInput";
-import { useState, useCallback } from "react";
-import { HEX_COLOR_REGEX, ICON_REGEX } from "../../const";
-import SvgInput from "./SvgInput";
-import PopupContainer from "../ui/PopupContainer";
-import Upload from "./Upload";
+
+const ICON_REGEX = /^[a-zA-Z0-9-_. ]{2,32}$/;
+const HEX_COLOR_REGEX = /#[a-fA-F0-9]{6}$/;
type Props = {
- addBadge: (badge: Omit