✨ feat: Add qwik-react (#103)

This adds the following pages: The landing page (/) The pricing page (/pricing) The contact page (/contact) The changelog page (/changelog) Terms Of Service page (/terms) Privacy Policy (/privacy)
2025-12-15 18:25:37 +02:00 · 2024-08-30 16:19:58 +03:00
parent d13d3dc5d8
commit 73cec51728
102 changed files with 5096 additions and 105 deletions
--- a/packages/ui/src/react/my-cursor.tsx
+++ b/packages/ui/src/react/my-cursor.tsx
@@ -0,0 +1,117 @@
+/** @jsxImportSource react */
+import React from 'react'
+import { motion } from 'framer-motion'
+import { cn } from '@/design'
+import { qwikify$ } from '@builder.io/qwik-react';
+
+export const CursorSVG = ({ flip }: { flip?: boolean }) => (
+    <svg fill="none" height="18"
+        className={cn(flip ? 'scale-x-[-1]' : '', 'mb-9')}
+        viewBox="0 0 17 18" width="17">
+        <path
+            d="M15.5036 3.11002L12.5357 15.4055C12.2666 16.5204 10.7637 16.7146 10.22 15.7049L7.4763 10.6094L2.00376 8.65488C0.915938 8.26638 0.891983 6.73663 1.96711 6.31426L13.8314 1.65328C14.7729 1.28341 15.741 2.12672 15.5036 3.11002ZM7.56678 10.6417L7.56645 10.6416C7.56656 10.6416 7.56667 10.6416 7.56678 10.6417L7.65087 10.4062L7.56678 10.6417Z"
+            fill="currentColor"
+            style={{
+                stroke: `var(--cursor-color)`,
+                fill: `var(--cursor-color-light)`,
+            }}
+            stroke="currentColor"
+            // className={cn(color ? `stroke-${color}-400 text-${color}-500` : 'stroke-primary-400 text-primary-500')}
+            strokeWidth="1.5"
+        />
+    </svg>
+)
+type CursorProps = { class?: string; text: string, color?: string, flip?: boolean }
+
+const hexToRGBA = (hex: string, alpha: number = 1) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+export const ReactMyCursor: React.FC<CursorProps> = ({
+    class: className,
+    text,
+    color = "#3B82F6",
+    flip = false,
+}) => {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const [position, setPosition] = React.useState({ x: 0, y: 0 });
+
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return;
+
+        const handleMouseMove = (event: MouseEvent) => {
+            const rect = container.getBoundingClientRect();
+            setPosition({
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top
+            });
+
+            console.log(event.clientX - rect.left, event.clientY - rect.top)
+
+        };
+
+        window.addEventListener('mousemove', handleMouseMove);
+
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+        };
+
+    }, []);
+
+    const cursorElement = <CursorSVG flip={flip} />;
+    const textElement = (
+        <div
+            style={{
+                backgroundColor: `var(--cursor-color)`,
+                borderColor: `var(--cursor-color-dark)`,
+            }}
+            className={cn(
+                'w-fit rounded-full py-1 px-2 text-white',
+            )}
+        >
+            {text}
+        </div>
+    );
+
+    const colorStyles = {
+        '--cursor-color': color,
+        '--cursor-color-light': hexToRGBA(color, 0.7),
+        '--cursor-color-dark': hexToRGBA(color, 0.8),
+    } as React.CSSProperties;
+
+    return (
+        <div
+            ref={containerRef}
+            style={{
+                ...colorStyles,
+                position: 'fixed',
+                pointerEvents: 'none',
+                zIndex: 9999,
+                transform: `translate(${position.x}px, ${position.y}px)`,
+            }}
+            className="flex items-center"
+        >
+            <div className={cn('flex items-center', className)}>
+                {flip ? (
+                    <>
+                        {cursorElement}
+                        {textElement}
+                    </>
+                ) : (
+                    <>
+                        {textElement}
+                        {cursorElement}
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
+
+
+
+export const MyCursor = qwikify$(ReactMyCursor)