✨ feat: Add nav-progress bad

packages/ui/src/button.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import { ReactNode } from "react";
-
-interface ButtonProps {
-  children: ReactNode;
-  className?: string;
-  appName: string;
-}
-
-export const Button = ({ children, className, appName }: ButtonProps) => {
-  return (
-    <button
-      className={className}
-      onClick={() => alert(`Hello from your ${appName} app!`)}
-    >
-      {children}
-    </button>
-  );
-};

packages/ui/src/card.tsx

@@ -1,25 +0,0 @@
-export function Card({
-  className,
-  title,
-  children,
-  href,
-}: {
-  className?: string;
-  title: string;
-  children: React.ReactNode;
-  href: string;
-}): JSX.Element {
-  return (
-    <a
-      className={className}
-      href={`${href}?utm_source=create-turbo&utm_medium=basic&utm_campaign=create-turbo"`}
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <h2>
-        {title} <span>-&gt;</span>
-      </h2>
-      <p>{children}</p>
-    </a>
-  );
-}

packages/ui/src/code.tsx

@@ -1,9 +0,0 @@
-export function Code({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}): JSX.Element {
-  return <code className={className}>{children}</code>;
-}

packages/ui/src/index.ts

@@ -0,0 +1 @@
+export * from "./nav-progress"

packages/ui/src/nav-progress/index.tsx

@@ -0,0 +1,43 @@
+import { component$, useStyles$, useVisibleTask$ } from '@builder.io/qwik'
+import { useLocation } from '@builder.io/qwik-city'
+import type { NProgressOptions } from 'nprogress'
+import nProgress from 'nprogress'
+import nProgressStyles from 'nprogress/nprogress.css?inline'
+import nPrStyles from './npr.css?inline'
+
+interface Props {
+    options?: Partial<NProgressOptions> &
+    Partial<{
+        color: string
+        height: string
+    }>
+}
+
+export const NavProgress = component$(({ options = {} }: Props) => {
+    // const CSS_VAR_PREFIX = '--nav-progress-'
+
+    useStyles$(nProgressStyles + nPrStyles)
+
+    nProgress.configure({ showSpinner: false, ...options })
+
+    const location = useLocation()
+
+    // eslint-disable-next-line qwik/no-use-visible-task
+    useVisibleTask$(({ track }) => {
+        const isNavigating = track(() => location.isNavigating)
+        if (isNavigating) nProgress.start()
+        else nProgress.done()
+    })
+
+    // return (
+    //     <style
+    //         dangerouslySetInnerHTML={`
+    //   :root {
+    //     ${options.color ? `${CSS_VAR_PREFIX}color: ${options.color};` : ''}
+    //     ${options.height ? `${CSS_VAR_PREFIX}height: ${options.height};` : ''}
+    //   }
+    // `}
+    //     ></style>
+    // )
+    return <div data-name="progress" />
+})

packages/ui/src/nav-progress/npr.css

@@ -0,0 +1,53 @@
+#nprogress .bar {
+    background: theme("colors.primary.500");
+    height: 2px;
+    z-index: 80;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+    box-shadow: 0 0 10px theme("colors.primary.500"),
+        0 0 5px theme("colors.primary.500");
+    z-index: 80;
+}
+
+#nprogress .spinner-icon {
+    border-top-color: theme("colors.primary.500");
+    border-left-color: theme("colors.primary.500");
+    display: none;
+}
+
+html.dark #nprogress .bar {
+    background: theme("colors.primary.500");
+    height: 2px;
+}
+
+html.dark #nprogress .peg {
+    box-shadow: 0 0 10px theme("colors.primary.500"),
+        0 0 5px theme("colors.primary.500");
+}
+
+html.dark .spinner-icon {
+    border-top-color: theme("colors.primary.500");
+    border-left-color: theme("colors.primary.500");
+    display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+
+    #nprogress .bar {
+        background: theme("colors.primary.500");
+        height: 2px;
+    }
+
+    #nprogress .peg {
+        box-shadow: 0 0 10px theme("colors.primary.500"),
+            0 0 5px theme("colors.primary.500");
+    }
+
+    .spinner-icon {
+        border-top-color: theme("colors.primary.500");
+        border-left-color: theme("colors.primary.500");
+        display: none;
+    }
+}

packages/ui/src/types/misc.d.ts

@@ -0,0 +1,4 @@
+declare module '*?inline' {
+    const content: string;
+    export default content;
+}