feat: background Shape component

.github/workflows/test.yml

@@ -15,15 +15,15 @@ jobs:
       - uses: pnpm/action-setup@v4
         with:
           run_install: false
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
           node-version-file: "package.json"
           cache: pnpm
       - name: Install Dependencies
         run: pnpm install --frozen-lockfile
+      - name: Build
+        run: pnpm run build
       - name: Typecheck
         run: pnpm run typecheck
       - name: Run Biome
         run: pnpm exec biome ci .
-      - name: Build
-        run: pnpm run build

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-  "editor.defaultFormatter": "biomejs.biome"
+  "editor.defaultFormatter": "biomejs.biome",
+  "[jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  }
 }

biome.jsonc

@@ -1,7 +1,14 @@
 {
   "$schema": "https://biomejs.dev/schemas/2.2.5/schema.json",
-  "vcs": { "enabled": false, "clientKind": "git", "useIgnoreFile": false },
-  "files": { "ignoreUnknown": false, "includes": ["./src/**"] },
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": ["./src/**"]
+  },
   "formatter": {
     "enabled": true,
     "formatWithErrors": false,
@@ -29,6 +36,8 @@
         "noUnnecessaryConditions": "error",
         "noImportCycles": "warn",
         "useSortedClasses": {
+          "level": "info",
+          "fix": "safe",
           "options": {
             "attributes": ["classList"],
             "functions": ["cn"]
@@ -58,9 +67,17 @@
       "bracketSpacing": true
     }
   },
-  "html": { "formatter": { "selfCloseVoidElements": "always" } },
+  "html": {
+    "formatter": {
+      "selfCloseVoidElements": "always"
+    }
+  },
   "assist": {
     "enabled": true,
-    "actions": { "source": { "organizeImports": "on" } }
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
   }
 }

package.json

@@ -45,7 +45,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"
   },
-  "packageManager": "pnpm@10.17.1",
+  "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be",
   "engines": {
     "node": ">=24.5.2"
   }

src/app/layout.tsx

@@ -1,4 +1,5 @@
 import { HEADER_HEIGHT, Header } from "@/components/header"
+import { Shape } from "@/components/shapes"
 import { ThemeProvider } from "@/components/theme-provider"
 import "@/styles/globals.css"
 import { GeistSans } from "geist/font/sans"
@@ -60,6 +61,12 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
           // storageKey="polinetwork_darkmode_temp" // TODO: enable when dark mode design is ready
           disableTransitionOnChange
         >
+          <div className="-z-10 pointer-events-none fixed inset-0">
+            <Shape variant="big-teal" className="-translate-x-1/2 top-2 left-1/2" />
+            <Shape variant="small-blue" className="-translate-x-1/2 top-2 left-1/4 translate-y-1/2" />
+            <Shape variant="big-blue" className="-translate-x-1/2 -translate-y-1/2 top-0 left-1/2" />
+            <Shape variant="looper" className="-translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" />
+          </div>
           <div className="flex min-h-screen w-full flex-col items-center justify-start">
             <Header />
             {children}

src/app/not-found.tsx

@@ -3,7 +3,7 @@ import Link from "next/link"
 export default async function NotFound() {
   return (
     <main className="container mx-auto px-4 py-8">
-      <h2 className="mb-4 text-3xl font-bold text-accent-foreground">Not Found</h2>
+      <h2 className="mb-4 font-bold text-3xl text-accent-foreground">Not Found</h2>
 
       <p className="mb-4">This page doesn&apos;t exist or is not available yet.</p>
 

src/components/glass.tsx

@@ -4,7 +4,7 @@ type GlassProps = React.HTMLAttributes<HTMLDivElement>
 
 export function Glass({ children, ...props }: GlassProps) {
   return (
-    <div {...props} className={cn("backdrop-blur-md rounded-lg border border-gray-200 p-4", props.className)}>
+    <div {...props} className={cn("rounded-lg border border-gray-200 p-4 backdrop-blur-md", props.className)}>
       {children}
     </div>
   )

src/components/header.tsx

@@ -17,7 +17,7 @@ export async function Header() {
               width={40}
               height={40}
             />
-            <h1 className="hidden text-2xl font-bold text-accent-foreground md:block">PoliNetwork</h1>
+            <h1 className="hidden font-bold text-2xl text-accent-foreground md:block">PoliNetwork</h1>
           </div>
         </Link>
         <nav className="flex grow items-center justify-end space-x-8">

src/components/shapes.tsx

@@ -0,0 +1,32 @@
+import Image from "next/image"
+import bigBlueSvg from "@/assets/shapes/big-blue.svg"
+import bigTealSvg from "@/assets/shapes/big-teal.svg"
+import looperSvg from "@/assets/shapes/looper.svg"
+import smallBlueSvg from "@/assets/shapes/small-blue.svg"
+import { cn } from "@/lib/utils"
+
+export type ShapeVariant = "big-blue" | "big-teal" | "small-blue" | "looper"
+
+export type ShapeProps = {
+  variant: ShapeVariant
+  className?: string
+}
+
+export const Shape: React.FC<ShapeProps> = ({ variant, className }) => {
+  const getShapeSrc = () => {
+    switch (variant) {
+      case "big-blue":
+        return bigBlueSvg
+      case "big-teal":
+        return bigTealSvg
+      case "small-blue":
+        return smallBlueSvg
+      case "looper":
+        return looperSvg
+      default:
+        return ""
+    }
+  }
+
+  return <Image src={getShapeSrc()} aria-hidden alt="" className={cn(className, "-z-10 absolute select-none")} />
+}

src/components/ui/input.tsx

@@ -19,15 +19,15 @@ function Input({ icon, className, containerClassName, ...inputProps }: InputProp
         containerClassName
       )}
     >
-      {icon && <span className="flex h-6 w-6 items-center justify-center shrink-0 text-text-primary"> {icon} </span>}
+      {icon && <span className="flex h-6 w-6 shrink-0 items-center justify-center text-text-primary"> {icon} </span>}
 
       <input
         type={inputProps.type}
         placeholder={inputProps.placeholder ?? undefined}
         data-slot="input"
         {...inputProps}
         className={cn(
-          "w-full bg-transparent border-none outline-none",
+          "w-full border-none bg-transparent outline-none",
           "typo-body-medium text-text-primary placeholder:text-text-secondary",
           className
         )}

src/components/ui/select.tsx

@@ -39,7 +39,7 @@ function SelectTrigger({
           "group inline-flex items-center justify-center gap-1.5",
           paddingClass,
           "rounded-buttonsM",
-          "bg-background-blur border border-white/50",
+          "border border-white/50 bg-background-blur",
           "typo-body-medium text-text-primary",
           "disabled:cursor-not-allowed disabled:opacity-50",
           className
@@ -68,16 +68,16 @@ function SelectContent({
         data-slot="select-content"
         sideOffset={sideOffset}
         className={cn(
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:animate-out data-[state=open]:animate-in",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
           "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
 
           "relative z-50 max-h-[var(--radix-select-content-available-height)]",
-          "origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto",
+          "origin-(--radix-select-content-transform-origin) overflow-y-auto overflow-x-hidden",
           "rounded-rectangles border border-white/40",
-          "bg-background-blur backdrop-blur-xl shadow-lg",
+          "bg-background-blur shadow-lg backdrop-blur-xl",
           "text-text-primary",
           className
         )}
@@ -117,7 +117,7 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full select-none cursor-pointer items-center gap-1.5",
+        "relative flex w-full cursor-pointer select-none items-center gap-1.5",
         "rounded-buttonsM px-5 py-2.5",
         "typo-body-medium text-text-primary",
         "outline-none",
@@ -136,7 +136,7 @@ function SelectSeparator({ className, ...props }: React.ComponentProps<typeof Se
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn("my-1 h-px bg-grey/40 pointer-events-none -mx-1", className)}
+      className={cn("-mx-1 pointer-events-none my-1 h-px bg-grey/40", className)}
       {...props}
     />
   )

tsconfig.json

@@ -8,27 +8,43 @@
     "resolveJsonModule": true,
     "moduleDetection": "force",
     "isolatedModules": true,
-
     /* Strictness */
     "strict": true,
     "noUncheckedIndexedAccess": true,
     "checkJs": true,
-
     /* Bundled projects */
-    "lib": ["dom", "dom.iterable", "ES2022"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "ES2022"
+    ],
     "noEmit": true,
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "jsx": "preserve",
-    "plugins": [{ "name": "next" }],
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "incremental": true,
-
     /* Path Aliases */
-    "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": [".eslintrc.cjs", "next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.js", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
+  "include": [
+    ".eslintrc.cjs",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.cjs",
+    "**/*.js",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}