chore: adding the fonts

apps/docs/components/icons/text-square.tsx

@@ -0,0 +1,23 @@
+import {IconSvgProps} from "@/types";
+
+export const TextSquare = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    focusable="false"
+    height={size || height}
+    viewBox="0 0 20 20"
+    width={size || width}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M7.29363 4.20835C6.93542 4.20829 6.60053 4.20824 6.32693 4.24911C6.01785 4.29528 5.70032 4.40444 5.44651 4.68645C5.20118 4.95903 5.11457 5.28386 5.07703 5.59413C5.04193 5.88416 5.04196 6.24367 5.04199 6.64964L5.04199 7.12502C5.04199 7.4702 5.32181 7.75002 5.66699 7.75002C6.01217 7.75002 6.29199 7.4702 6.29199 7.12502V6.68521C6.29199 6.23278 6.29307 5.95012 6.31798 5.74429C6.32966 5.64773 6.34427 5.59208 6.35607 5.5602C6.36604 5.53329 6.37315 5.5254 6.37551 5.52278L6.37619 5.522C6.37733 5.52063 6.37816 5.51963 6.38568 5.51619C6.39953 5.50986 6.43506 5.49683 6.51161 5.48539C6.6817 5.45999 6.92125 5.45835 7.33366 5.45835H8.37533V12.5417H6.91699C6.57181 12.5417 6.29199 12.8215 6.29199 13.1667C6.29199 13.5119 6.57181 13.7917 6.91699 13.7917H11.5003C11.8455 13.7917 12.1253 13.5119 12.1253 13.1667C12.1253 12.8215 11.8455 12.5417 11.5003 12.5417H9.62533V5.45835H10.667C11.0794 5.45835 11.319 5.45999 11.489 5.48539C11.5656 5.49683 11.6011 5.50986 11.615 5.51619C11.6225 5.51963 11.6233 5.52063 11.6245 5.522L11.625 5.52265C11.6274 5.52528 11.6346 5.53329 11.6446 5.5602C11.6564 5.59208 11.671 5.64773 11.6827 5.74429C11.7076 5.95012 11.7087 6.23278 11.7087 6.68521V7.12502C11.7087 7.4702 11.9885 7.75002 12.3337 7.75002C12.6788 7.75002 12.9587 7.4702 12.9587 7.12502L12.9587 6.64963C12.9587 6.24367 12.9587 5.88415 12.9236 5.59413C12.8861 5.28386 12.7995 4.95903 12.5541 4.68645C12.3003 4.40444 11.9828 4.29528 11.6737 4.24911C11.4001 4.20824 11.0652 4.20829 10.707 4.20835H7.29363Z"
+      fill="#A1A1AA"
+    />
+    <path
+      clipRule="evenodd"
+      d="M8.95251 0.0416872C7.02885 0.0416765 5.52132 0.041668 4.34508 0.199809C3.14113 0.361676 2.19111 0.699459 1.44544 1.44513C0.699764 2.19081 0.361981 3.14083 0.200114 4.34478C0.0419731 5.52101 0.0419816 7.02854 0.0419924 8.95221V9.04784C0.0419816 10.9715 0.0419731 12.479 0.200114 13.6553C0.361981 14.8592 0.699764 15.8092 1.44544 16.5549C2.19111 17.3006 3.14113 17.6384 4.34508 17.8002C5.52132 17.9584 7.02885 17.9584 8.95252 17.9584H9.04814C10.9718 17.9584 12.4793 17.9584 13.6556 17.8002C14.8595 17.6384 15.8095 17.3006 16.5552 16.5549C17.3009 15.8092 17.6387 14.8592 17.8005 13.6553C17.9587 12.479 17.9587 10.9715 17.9587 9.04783V8.95221C17.9587 7.02855 17.9587 5.52102 17.8005 4.34478C17.6387 3.14083 17.3009 2.19081 16.5552 1.44513C15.8095 0.699459 14.8595 0.361676 13.6556 0.199809C12.4793 0.041668 10.9718 0.0416765 9.04814 0.0416872H8.95251ZM2.32932 2.32902C2.80404 1.8543 3.4463 1.58189 4.51164 1.43866C5.59496 1.29301 7.01847 1.29169 9.00033 1.29169C10.9822 1.29169 12.4057 1.29301 13.489 1.43866C14.5543 1.58189 15.1966 1.8543 15.6713 2.32902C16.146 2.80373 16.4185 3.446 16.5617 4.51133C16.7073 5.59465 16.7087 7.01817 16.7087 9.00002C16.7087 10.9819 16.7073 12.4054 16.5617 13.4887C16.4185 14.554 16.146 15.1963 15.6713 15.671C15.1966 16.1457 14.5543 16.4181 13.489 16.5614C12.4057 16.707 10.9822 16.7084 9.00033 16.7084C7.01847 16.7084 5.59496 16.707 4.51164 16.5614C3.4463 16.4181 2.80404 16.1457 2.32932 15.671C1.85461 15.1963 1.5822 14.554 1.43897 13.4887C1.29332 12.4054 1.29199 10.9819 1.29199 9.00002C1.29199 7.01817 1.29332 5.59465 1.43897 4.51133C1.5822 3.446 1.85461 2.80373 2.32932 2.32902Z"
+      fill="#A1A1AA"
+      fillRule="evenodd"
+    />
+  </svg>
+);

apps/docs/components/themes/components/configuration/font-button.tsx

@@ -0,0 +1,50 @@
+import {Button} from "@heroui/react";
+import {clsx} from "@heroui/shared-utils";
+
+interface FontButtonProps {
+  title: any;
+  className: string;
+  value: string;
+  setValue: (value: any) => void;
+}
+
+function getFontStyle(fontName) {
+  switch (fontName) {
+    case "inter":
+      return {fontFamily: "'Inter', sans-serif", letterSpacing: "-0.02em"};
+    case "roboto":
+      return {fontFamily: "'Roboto', sans-serif"};
+    case "outfit":
+      return {fontFamily: "'Outfit', sans-serif", letterSpacing: "0.05em"};
+    case "lora":
+      return {fontFamily: "'Lora', serif"};
+    default:
+      return {};
+  }
+}
+
+const FontButton = ({title, value, setValue}: FontButtonProps) => {
+  const style = getFontStyle(title);
+
+  return (
+    <Button
+      className={clsx(
+        "group h-auto p-4 flex flex-col justify-between",
+        value === title ? "border-foreground" : "",
+      )}
+      variant="bordered"
+      onPress={() => {
+        setValue(title);
+      }}
+    >
+      <div className="font-medium text-2xl" style={style}>
+        Ag
+      </div>
+      <div className="relative text-sm text-default-500">
+        <div className="">{title}</div>
+      </div>
+    </Button>
+  );
+};
+
+export default FontButton;

apps/docs/components/themes/components/configuration/fonts.tsx

@@ -0,0 +1,19 @@
+import {useThemeBuilder} from "../../provider";
+import {ConfigSection} from "../config-section";
+
+import FontButton from "./font-button";
+
+import {TextSquare} from "@/components/icons/text-square";
+
+export function Fonts() {
+  const {font, setFont} = useThemeBuilder();
+
+  return (
+    <ConfigSection icon={<TextSquare className="h-4 w-4" />} title="Fonts">
+      <FontButton className="rounded-tl-none" setValue={setFont} title="inter" value={font} />
+      <FontButton className="rounded-tl-sm" setValue={setFont} title="roboto" value={font} />
+      <FontButton className="rounded-tl-md" setValue={setFont} title="outfit" value={font} />
+      <FontButton className="rounded-tl-lg" setValue={setFont} title="lora" value={font} />
+    </ConfigSection>
+  );
+}