dh-remixer-badge 1.0.0

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "dh-remixer-badge",
+  "version": "1.0.0",
+  "license": "ISC",
+  "type": "module",
+  "scripts": {
+    "start": "webpack serve",
+    "build": "webpack",
+    "type-check": "tsc"
+  },
+  "dependencies": {
+    "react": "19.2.5",
+    "react-dom": "19.2.5"
+  },
+  "devDependencies": {
+    "@babel/core": "7.29.0",
+    "@babel/preset-env": "7.29.3",
+    "@babel/preset-react": "7.28.5",
+    "@svgr/webpack": "8.1.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "babel-loader": "10.1.1",
+    "css-loader": "7.1.4",
+    "esbuild": "0.28.0",
+    "esbuild-loader": "4.4.3",
+    "html-webpack-plugin": "5.6.7",
+    "sass": "1.99.0",
+    "sass-loader": "16.0.7",
+    "style-loader": "4.0.0",
+    "typescript": "6.0.3",
+    "webpack": "5.106.2",
+    "webpack-cli": "7.0.2",
+    "webpack-dev-server": "5.2.3"
+  }
+}

package/src/common/BadgeContainer.tsx

@@ -0,0 +1,11 @@
+type BadgeContainerProps = {
+  children: React.ReactNode;
+};
+
+const BadgeContainer = (props: BadgeContainerProps) => {
+  const { children } = props;
+
+  return <div className="badge-container">{children}</div>;
+};
+
+export default BadgeContainer;

package/src/common/Button.tsx

@@ -0,0 +1,15 @@
+type ButtonProps = {
+  children: React.ReactNode;
+  onClick: () => void;
+};
+
+const Button = (props: ButtonProps) => {
+  const { onClick, children } = props;
+  return (
+    <button className="button" onClick={onClick}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;

package/src/common/Divider.tsx

@@ -0,0 +1,5 @@
+const Divider = () => {
+  return <div className="divider" />;
+};
+
+export default Divider;

package/src/common/MadeWithText.tsx

@@ -0,0 +1,15 @@
+import RemixerIcon from "../icons/remixer-log.svg";
+
+const MadeWithText = () => {
+  return (
+    <div className="text-container">
+      <RemixerIcon />
+      <p className="made-with-remixer">
+        <span className="made-with">Built with</span>{" "}
+        <span className="remixer">Remixer</span>
+      </p>
+    </div>
+  );
+};
+
+export default MadeWithText;

package/src/components/DefaultBadge.tsx

@@ -0,0 +1,12 @@
+import BadgeContainer from "../common/BadgeContainer";
+import MadeWithText from "../common/MadeWithText";
+
+const DefaultBadge = () => {
+  return (
+    <BadgeContainer>
+      <MadeWithText />
+    </BadgeContainer>
+  );
+};
+
+export default DefaultBadge;

package/src/components/NavBadge.tsx

@@ -0,0 +1,24 @@
+import BadgeContainer from "../common/BadgeContainer";
+import Button from "../common/Button";
+import Divider from "../common/Divider";
+import MadeWithText from "../common/MadeWithText";
+
+const NavBadge = () => {
+  const handleUpgrade = () => {};
+
+  const handleGetAccess = () => {};
+
+  const handleSignup = () => {};
+
+  return (
+    <BadgeContainer>
+      <MadeWithText />
+      <Divider />
+      <Button onClick={handleUpgrade}>Upgrade plan</Button>
+      <Button onClick={handleGetAccess}>Get access</Button>
+      <Button onClick={handleSignup}>Signup</Button>
+    </BadgeContainer>
+  );
+};
+
+export default NavBadge;

package/src/components/UpgradeBadge.tsx

@@ -0,0 +1,22 @@
+import BadgeContainer from "../common/BadgeContainer";
+import Button from "../common/Button";
+import Divider from "../common/Divider";
+import MadeWithText from "../common/MadeWithText";
+import RightIcon from "../icons/right-arrow.svg";
+
+const UpgradeBadge = () => {
+  const handleUpgrade = () => {};
+
+  return (
+    <BadgeContainer>
+      <MadeWithText />
+      <Divider />
+      <div className="arrowed-button">
+        <Button onClick={handleUpgrade}>Upgrade plan</Button>
+        <RightIcon />
+      </div>
+    </BadgeContainer>
+  );
+};
+
+export default UpgradeBadge;

package/src/declarations.d.ts

@@ -0,0 +1,15 @@
+declare module "*.svg" {
+  import type { FC, SVGProps } from "react";
+  const ReactComponent: FC<SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}
+
+declare module "*.scss" {
+  const styles: Record<string, string>;
+  export default styles;
+}
+
+declare module "*.css" {
+  const styles: Record<string, string>;
+  export default styles;
+}

package/src/defaultBadge.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import "./styles/index.scss";
+import DefaultBadge from "./components/DefaultBadge";
+
+const renderReact = () => {
+  const container = document.getElementById("root");
+  if (!container) return;
+
+  const root = createRoot(container);
+  root.render(<DefaultBadge />);
+};
+
+renderReact();

package/src/icons/remixer-log.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path
+    d="M18.0005 12.0025C14.6877 12.0025 12.0012 14.6889 12.0012 18.0016V24.0006H24.0024V12H18.0031L18.0005 12.0025Z"
+    fill="url(#paint0_linear_14487_36369)" />
+  <path
+    d="M12.0012 5.99904V0H0V12.0006H5.99932C9.31215 12.0006 11.9986 9.31423 11.9986 6.00155L12.0012 5.99904Z"
+    fill="url(#paint1_linear_14487_36369)" />
+  <path
+    d="M5.99902 11.999C9.31222 11.999 11.9988 14.6851 11.999 17.998C11.999 21.3112 9.31236 23.9971 5.99902 23.9971C2.68583 23.9969 0 21.3111 0 17.998C0.00021569 14.6852 2.68596 11.9992 5.99902 11.999ZM18 0C21.3133 0 24 2.68585 24 5.99902C24 9.3122 21.3133 11.998 18 11.998C14.6869 11.9978 12.001 9.31205 12.001 5.99902C12.001 2.68601 14.6869 0.00024737 18 0Z"
+    fill="url(#paint2_linear_14487_36369)" />
+  <path d="M12.0012 6H18.0005V11.999C14.6877 11.999 12.0012 9.31016 12.0012 6Z" fill="white" />
+  <path d="M5.99927 12V6.00096H11.9986C11.9986 9.31364 9.30958 12 5.99927 12Z" fill="white" />
+  <path d="M12.0012 18H6.0019L6.0019 12.001C9.31473 12.001 12.0012 14.6898 12.0012 18Z" fill="white" />
+  <path d="M18.0005 12V17.999H12.0012C12.0012 14.6864 14.6902 12 18.0005 12Z" fill="white" />
+  <defs>
+    <linearGradient id="paint0_linear_14487_36369" x1="12.0024" y1="12" x2="24.0018" y2="24"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3F3F46" />
+      <stop offset="1" stop-color="#71717A" />
+    </linearGradient>
+    <linearGradient id="paint1_linear_14487_36369" x1="0.001139" y1="3.18903e-07" x2="12.0005"
+      y2="12" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#71717A" />
+      <stop offset="1" stop-color="#3F3F46" />
+    </linearGradient>
+    <linearGradient id="paint2_linear_14487_36369" x1="-8.53364" y1="33.7017" x2="-6.30119"
+      y2="-14.057" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#BE59FF" />
+      <stop offset="0.19" stop-color="#9D60FF" />
+      <stop offset="0.74" stop-color="#4274FF" />
+      <stop offset="1" stop-color="#1F7CFF" />
+    </linearGradient>
+  </defs>
+</svg>

package/src/icons/right-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1635 10.0004L7.60246 6.43958C7.48718 6.32417 7.42816 6.19646 7.42538 6.05646C7.42274 5.9166 7.48177 5.78625 7.60246 5.66542C7.72329 5.54472 7.85232 5.48438 7.98954 5.48438C8.12677 5.48438 8.25579 5.54472 8.37663 5.66542L12.2468 9.53563C12.3109 9.59979 12.3589 9.67167 12.391 9.75125C12.4231 9.83083 12.4391 9.91389 12.4391 10.0004C12.4391 10.0869 12.4231 10.17 12.391 10.2496C12.3589 10.3292 12.3109 10.401 12.2468 10.4652L8.37663 14.3354C8.26121 14.4507 8.13697 14.5063 8.00392 14.5021C7.871 14.4978 7.74413 14.4353 7.62329 14.3146C7.5026 14.1938 7.44225 14.0647 7.44225 13.9275C7.44225 13.7903 7.5026 13.6613 7.62329 13.5404L11.1635 10.0004Z" fill="#A18AFB" fill-opacity="0.5"/>
+</svg>

package/src/navBadge.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import "./styles/index.scss";
+import DefaultBadge from "./components/DefaultBadge";
+import NavBadge from "./components/NavBadge";
+
+const renderReact = () => {
+  const container = document.getElementById("root");
+  if (!container) return;
+
+  const root = createRoot(container);
+  root.render(<NavBadge />);
+};
+
+renderReact();

package/src/styles/fonts.scss

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: "proxima-nova";
+  src: url("../fonts/ProximaNovaRegular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "proxima-nova";
+  src: url("../fonts/ProximaNovaBold.woff") format("woff");
+  font-weight: bold;
+  font-style: bold;
+}

package/src/styles/index.scss

@@ -0,0 +1,65 @@
+@import "./fonts.scss";
+
+.badge-container {
+  background-color: #09090b;
+  border: 2px solid #3f3f46;
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border-radius: 14px;
+  gap: 8px;
+
+  .text-container {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    .made-with-remixer {
+      margin: 0;
+      line-height: 20px;
+      font-family: "MyFont", sans-serif;
+      font-size: 13px;
+
+      .made-with {
+        color: #d4d4d8;
+      }
+
+      .remixer {
+        color: #fff;
+        font-weight: 700;
+      }
+    }
+  }
+
+  .divider {
+    height: 20px;
+    width: 1px;
+    background-color: #ffffff1a;
+  }
+
+  .arrowed-button {
+    display: flex;
+    align-items: center;
+  }
+
+  .button {
+    color: #c6b7ff;
+    font-weight: 700;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    height: 24px;
+    padding: 0 6px;
+    font-size: 13px;
+    border-radius: 6px;
+    line-height: 20px;
+
+    &:hover {
+      background-color: #b6a3fe1a;
+    }
+
+    &:active {
+      background-color: #b6a3fe33;
+    }
+  }
+}

package/src/upgradeBadge.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import "./styles/index.scss";
+import UpgradeBadge from "./components/UpgradeBadge";
+
+const renderReact = () => {
+  const container = document.getElementById("root");
+  if (!container) return;
+
+  const root = createRoot(container);
+  root.render(<UpgradeBadge />);
+};
+
+renderReact();

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"]
+}

package/webpack.config.js

@@ -0,0 +1,44 @@
+const path = require("path");
+
+module.exports = {
+  mode: "development",
+  entry: {
+    defaultBadge: "./src/defaultBadge.tsx",
+    upgradeBadge: "./src/upgradeBadge.tsx",
+    navBadge: "./src/navBadge.tsx",
+  },
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "[name].js",
+    clean: true,
+  },
+
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".jsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.[jt]sx?$/,
+        loader: "esbuild-loader",
+        options: {
+          loader: "tsx",
+          target: "es2017",
+        },
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        use: ["@svgr/webpack"],
+      },
+      {
+        test: /\.s?css$/i,
+        use: ["style-loader", "css-loader", "sass-loader"],
+      },
+      {
+        test: /\.woff2?$/i,
+        type: "asset/resource",
+      },
+    ],
+  },
+};