Add animated star border to search dialog (#10)

Author: kylemclaren

.github/workflows/ci.yml

@@ -4,11 +4,16 @@ on:
   pull_request:
     branches:
       - main
+    paths-ignore:
+      - '*.md'
 
 jobs:
   build:
     name: Build
     runs-on: ubuntu-latest
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+      cancel-in-progress: true
     steps:
       - uses: actions/checkout@v4
 
@@ -29,3 +34,11 @@ jobs:
 
       - name: Build
         run: pnpm build
+
+      - name: Setup flyctl
+        uses: superfly/flyctl-actions/setup-flyctl@master
+
+      - name: Build Fly app
+        run: flyctl deploy --build-only
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

components.json

@@ -18,5 +18,7 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "registries": {}
+  "registries": {
+    "@react-bits": "https://reactbits.dev/r/{name}.json"
+  }
 }

src/components/StarBorder.tsx

@@ -0,0 +1,66 @@
+import type React from 'react';
+import { cn } from '@/lib/utils';
+
+type StarBorderProps<T extends React.ElementType> =
+  React.ComponentPropsWithoutRef<T> & {
+    as?: T;
+    className?: string;
+    children?: React.ReactNode;
+    color?: string;
+    speed?: React.CSSProperties['animationDuration'];
+    thickness?: number;
+    isAnimating?: boolean;
+  };
+
+const StarBorder = <T extends React.ElementType = 'div'>({
+  as,
+  className = '',
+  color = 'white',
+  speed = '6s',
+  thickness = 1,
+  isAnimating = true,
+  children,
+  ...rest
+}: StarBorderProps<T>) => {
+  const Component = as || 'div';
+
+  return (
+    <Component
+      className={cn('relative inline-block overflow-hidden', className)}
+      {...(rest as React.ComponentPropsWithoutRef<T>)}
+      style={{
+        padding: `${thickness}px`,
+        ...(rest as React.CSSProperties & { style?: React.CSSProperties })
+          .style,
+      }}
+    >
+      <div
+        className={cn(
+          'absolute w-[300%] h-[50%] bottom-[-11px] right-[-250%] rounded-full animate-star-movement-bottom z-0 transition-opacity duration-500',
+          !isAnimating && 'opacity-0',
+        )}
+        style={{
+          background: `radial-gradient(circle, ${color}, transparent 10%)`,
+          animationDuration: speed,
+          animationPlayState: isAnimating ? 'running' : 'paused',
+          opacity: isAnimating ? 0.7 : 0,
+        }}
+      />
+      <div
+        className={cn(
+          'absolute w-[300%] h-[50%] top-[-10px] left-[-250%] rounded-full animate-star-movement-top z-0 transition-opacity duration-500',
+          !isAnimating && 'opacity-0',
+        )}
+        style={{
+          background: `radial-gradient(circle, ${color}, transparent 10%)`,
+          animationDuration: speed,
+          animationPlayState: isAnimating ? 'running' : 'paused',
+          opacity: isAnimating ? 0.7 : 0,
+        }}
+      />
+      <div className="relative z-[1]">{children}</div>
+    </Component>
+  );
+};
+
+export default StarBorder;