Loading...
;
23 | }
24 |
25 | return (
26 | Loading...
;
23 | }
24 |
25 | // This page auto-opens the execution panel
26 | return (
27 |
37 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/components/app/(home)/sections/hero-input/Button/Button.tsx:
--------------------------------------------------------------------------------
1 | import { AnimatePresence, motion } from "motion/react";
2 |
3 | import AnimatedWidth from "@/components/shared/layout/animated-width";
4 | import ArrowRight from "@/components/app/(home)/sections/hero-input/_svg/ArrowRight";
5 | import Button from "@/components/shared/button/Button";
6 |
7 | export default function HeroInputSubmitButton({
8 | tab,
9 | dirty,
10 | }: {
11 | tab: string;
12 | dirty: boolean;
13 | }) {
14 | return (
15 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/components/app/(home)/sections/hero-input/_svg/ArrowRight.tsx:
--------------------------------------------------------------------------------
1 | export default function ArrowRight() {
2 | return (
3 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/components/app/(home)/sections/hero-input/_svg/Globe.tsx:
--------------------------------------------------------------------------------
1 | export default function Globe() {
2 | return (
3 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/components/app/(home)/sections/hero-scraping/Code/Loading/Loading.tsx:
--------------------------------------------------------------------------------
1 | import { AnimatePresence, motion } from "motion/react";
2 | import { useEffect, useState } from "react";
3 |
4 | import { encryptText } from "@/components/app/(home)/sections/hero/Title/Title";
5 | import AnimatedWidth from "@/components/shared/layout/animated-width";
6 | import Spinner from "@/components/ui/spinner";
7 |
8 | export default function HeroScrapingCodeLoading({
9 | finished,
10 | }: {
11 | finished: boolean;
12 | }) {
13 | const [scrapingText, setScrapingText] = useState("Scraping...");
14 |
15 | useEffect(() => {
16 | if (finished) return;
17 |
18 | let timeout = 0;
19 | let tick = 0;
20 |
21 | const animate = () => {
22 | tick += 1;
23 |
24 | if (tick % 3 !== 0) {
25 | setScrapingText(
26 | encryptText("Scraping", 0, {
27 | randomizeChance: 0.6 + Math.random() * 0.3,
28 | }) + "...",
29 | );
30 | } else {
31 | setScrapingText("Scraping...");
32 | }
33 |
34 | const interval = 80;
35 | timeout = window.setTimeout(animate, interval);
36 | };
37 |
38 | animate();
39 |
40 | return () => {
41 | window.clearTimeout(timeout);
42 | };
43 | }, [finished]);
44 |
45 | return (
46 |
38 |
48 |
49 |
50 |
51 |
61 |
62 |
47 |
50 |
51 |
57 | {finished ? "Scrape Completed" : scrapingText}
58 |
59 |
60 |
61 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/components/app/(home)/sections/hero-scraping/Code/Loading/_svg/Check.tsx:
--------------------------------------------------------------------------------
1 | export default function Check() {
2 | return (
3 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/components/app/(home)/sections/hero-scraping/HeroScraping.css:
--------------------------------------------------------------------------------
1 | .hero-scraping-highlight::before {
2 | animation: hero-scraping-highlight-before 1s linear infinite;
3 | transition: none !important;
4 | }
5 |
6 | @keyframes hero-scraping-highlight-before {
7 | 0% {
8 | border-color: var(--border-loud);
9 | opacity: 1;
10 | }
11 |
12 | 40% {
13 | opacity: 0.25;
14 | border-color: var(--heat-100);
15 | }
16 |
17 | 80% {
18 | border-color: var(--border-loud);
19 | opacity: 1;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/components/app/(home)/sections/hero-scraping/Tag/Tag.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from "motion/react";
2 | import { ComponentProps, useEffect, useState } from "react";
3 |
4 | import { encryptText } from "@/components/app/(home)/sections/hero/Title/Title";
5 | import { cn } from "@/utils/cn";
6 |
7 | export default function HeroScrapingTag({
8 | active,
9 | label,
10 | ...attrs
11 | }: ComponentProps
50 |
51 |
52 |
55 | );
56 | };
57 |
--------------------------------------------------------------------------------
/components/app/(home)/sections/hero/Background/_svg/CenterStar.tsx:
--------------------------------------------------------------------------------
1 | export default function CenterStar({
2 | ...props
3 | }: React.SVGPropsOpenAI Inspired Agent Builder
11 |
12 |
13 |
41 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/components/app/(home)/sections/hero/Pixi/Pixi.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Suspense, lazy, useState, useEffect } from "react";
4 |
5 | const Pixi = lazy(() => import("@/components/shared/pixi/Pixi"));
6 | import features from "./tickers/features";
7 |
8 | function PixiContent() {
9 | return (
10 |
14 |
39 |
40 |
45 |
57 |
58 | );
59 | }
60 |
--------------------------------------------------------------------------------
/components/shared/buttons/fire-action-link.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { cn } from "@/utils/cn";
3 |
4 | interface FireActionLinkProps {
5 | href?: string;
6 | label: string;
7 | className?: string;
8 | variant?: "link" | "button";
9 | onClick?: () => void;
10 | }
11 |
12 | export function FireActionLink({
13 | href,
14 | label,
15 | className,
16 | variant = "link",
17 | onClick,
18 | }: FireActionLinkProps) {
19 | const baseClasses =
20 | variant === "button"
21 | ? cn(
22 | "inline-block py-4 px-8 rounded-6",
23 | "text-label-small text-heat-100 bg-heat-4",
24 | "hover:bg-heat-8 transition-all",
25 | "active:scale-[0.98]",
26 | className,
27 | )
28 | : cn(
29 | "text-label-small text-secondary hover:text-heat-100 transition-all",
30 | "hover:underline underline-offset-4",
31 | "active:scale-[0.98]",
32 | className,
33 | );
34 |
35 | if (onClick) {
36 | return (
37 |
40 | );
41 | }
42 |
43 | return (
44 |
45 | {label}
46 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/components/shared/buttons/index.ts:
--------------------------------------------------------------------------------
1 | // Button Components
2 | export { SlateButton } from "./slate-button";
3 | // export { HeatButton } from "./heat-button";
4 | export { FireActionLink } from "./fire-action-link";
5 |
--------------------------------------------------------------------------------
/components/shared/color-styles/color-styles.tsx:
--------------------------------------------------------------------------------
1 | import colors from "@/styles/colors.json";
2 |
3 | const TYPED_COLORS = colors as unknown as Record<
4 | string,
5 | Record<"hex" | "p3", string>
6 | >;
7 |
8 | const hslValues = Object.entries(TYPED_COLORS).map(([key, value]) => {
9 | // Fix hex values - they need # prefix
10 | const hexValue = value.hex.startsWith("#") ? value.hex : `#${value.hex}`;
11 | return `--${key}: ${hexValue}`;
12 | });
13 |
14 | const p3Values = Object.entries(TYPED_COLORS)
15 | .filter(([, value]) => value.p3)
16 | .map(([key, value]) => `--${key}: color(display-p3 ${value.p3})`);
17 |
18 | const colorsStyle = `
19 | :root {
20 | ${hslValues.join(";\n ")}
21 | }
22 |
23 | @supports (color: color(display-p3 1 1 1)) {
24 | :root {
25 | ${p3Values.join(";\n ")}
26 | }
27 | }`;
28 |
29 | export default function ColorStyles() {
30 | return ;
31 | }
32 |
--------------------------------------------------------------------------------
/components/shared/effects/flame/Flame.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { HTMLAttributes, useEffect, useRef } from "react";
4 |
5 | import { cn } from "@/utils/cn";
6 | import { setIntervalOnVisible } from "@/utils/set-timeout-on-visible";
7 |
8 | import data from "./hero-flame-data.json";
9 |
10 | export default function CoreFlame(attrs: HTMLAttributes
36 |
55 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/components/shared/effects/flame/ascii-explosion.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { HTMLAttributes, useEffect, useRef } from "react";
4 |
5 | import { cn } from "@/utils/cn";
6 | import { setIntervalOnVisible } from "@/utils/set-timeout-on-visible";
7 |
8 | import data from "./explosion-data.json";
9 |
10 | export function AsciiExplosion(attrs: HTMLAttributes
44 |
53 |
54 |
41 |
51 |
52 | );
53 | }
54 |
55 | // Default export for backward compatibility
56 | export default AsciiExplosion;
57 |
--------------------------------------------------------------------------------
/components/shared/effects/flame/auth-pulse/auth-pulse.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { HTMLAttributes, useEffect, useRef } from "react";
4 | import { cn } from "@/utils/cn";
5 | import { setIntervalOnVisible } from "@/utils/set-timeout-on-visible";
6 | import data from "./pulse-data.json";
7 |
8 | interface AuthPulseProps extends HTMLAttributes
52 |
62 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/components/shared/effects/flame/core-flame.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { HTMLAttributes, useEffect, useRef } from "react";
4 | import { cn } from "@/utils/cn";
5 | import { setIntervalOnVisible } from "@/utils/set-timeout-on-visible";
6 | import data from "./core-flame.json";
7 |
8 | export function CoreFlame(attrs: HTMLAttributes
34 |
53 |
54 | );
55 | }
56 |
57 | // Export default for backward compatibility
58 | export default CoreFlame;
59 |
--------------------------------------------------------------------------------
/components/shared/effects/flame/flame-background.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 | import { cn } from "@/utils/cn";
5 | import { CoreFlame } from "./core-flame";
6 |
7 | interface FlameBackgroundProps {
8 | intensity?: number; // 0-100, like CPU usage
9 | animate?: boolean;
10 | className?: string;
11 | children?: React.ReactNode;
12 | }
13 |
14 | export function FlameBackground({
15 | intensity = 0,
16 | animate = false,
17 | className,
18 | children,
19 | }: FlameBackgroundProps) {
20 | // Convert 0-100 to 0-0.3 opacity
21 | const opacity = Math.min((intensity / 100) * 0.3, 0.3);
22 |
23 | // Speed increases with intensity
24 | const speed = Math.max(80 - (intensity / 100) * 40, 40);
25 |
26 | // Color gets more orange with intensity
27 | const color =
28 | intensity > 80 ? "heat-100" : intensity > 50 ? "heat-40" : "black-alpha-20";
29 |
30 | return (
31 |
42 |
51 |
52 |
32 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/components/shared/effects/flame/hero-flame-right.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useRef } from "react";
4 | import { setIntervalOnVisible } from "@/utils/set-timeout-on-visible";
5 | import data from "./hero-flame-data.json";
6 |
7 | interface HeroFlameRightProps {
8 | className?: string;
9 | style?: React.CSSProperties;
10 | hideOnMobile?: boolean;
11 | }
12 |
13 | export default function HeroFlameRight({
14 | className = "",
15 | style,
16 | hideOnMobile = true,
17 | }: HeroFlameRightProps) {
18 | const ref2 = useRef{children}
}
39 |
50 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/components/shared/effects/flame/hero-flame.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useRef } from "react";
4 |
5 | import { setIntervalOnVisible } from "@/utils/set-timeout-on-visible";
6 | import data from "./hero-flame-data.json";
7 |
8 | export default function HeroFlame() {
9 | const ref = useRef
51 |
61 |
62 |
41 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/components/shared/effects/flame/index.ts:
--------------------------------------------------------------------------------
1 | export { CoreFlame } from "./core-flame";
2 | export { AsciiExplosion } from "./ascii-explosion";
3 | export { default as HeroFlame } from "./hero-flame";
4 | export { SubtleExplosion } from "./subtle-explosion";
5 |
6 | // Convenience wrapper for dashboard usage
7 | export { FlameBackground } from "./flame-background";
8 |
--------------------------------------------------------------------------------
/components/shared/effects/flame/slate-grid/slate-grid.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { HTMLAttributes, useEffect, useRef } from "react";
4 | import { cn } from "@/utils/cn";
5 | import { setIntervalOnVisible } from "@/utils/set-timeout-on-visible";
6 | import data from "./grid-data.json";
7 |
8 | interface SlateGridProps extends HTMLAttributes
42 |
52 |
53 |
54 |
55 |
65 |
66 |
52 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/components/shared/effects/flame/subtle-explosion.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { HTMLAttributes, useEffect, useRef } from "react";
4 | import { cn } from "@/utils/cn";
5 | import { setIntervalOnVisible } from "@/utils/set-timeout-on-visible";
6 | import data from "./explosion-data.json";
7 |
8 | interface SubtleExplosionProps extends HTMLAttributes
53 |
62 |
63 |
55 |
66 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/components/shared/effects/flame/subtle-wave/subtle-wave.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useEffect, useRef } from "react";
4 | import { setIntervalOnVisible } from "@/utils/set-timeout-on-visible";
5 | import data from "./wave-data.json";
6 |
7 | export default function SubtleWave({ className = "" }: { className?: string }) {
8 | const containerRef = useRef
43 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/components/shared/header/Dropdown/Github/Github.tsx:
--------------------------------------------------------------------------------
1 | import Image from "@/components/shared/image/Image";
2 |
3 | import GithubFlame from "./Flame/Flame";
4 |
5 | export default function HeaderDropdownGithub() {
6 | return (
7 |
51 |
60 |
61 |
8 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/components/shared/header/Dropdown/Mobile/Mobile.tsx:
--------------------------------------------------------------------------------
1 | import { Fragment } from "react";
2 |
3 | import Button from "@/components/ui/shadcn/button";
4 | import {
5 | ConnectorToBottom,
6 | ConnectorToLeft,
7 | ConnectorToRight,
8 | } from "@/components/shared/layout/curvy-rect";
9 | import HeaderGithubClient from "@/components/shared/header/Github/GithubClient";
10 | import { NAV_ITEMS } from "@/components/shared/header/Nav/Nav";
11 |
12 | import HeaderDropdownMobileItem from "./Item/Item";
13 | import Link from "next/link";
14 |
15 | export default function HeaderDropdownMobile({
16 | ctaHref = "/signin/signup",
17 | ctaLabel = "Sign up",
18 | }: {
19 | ctaHref?: string;
20 | ctaLabel?: string;
21 | }) {
22 | return (
23 |
9 |
18 |
19 |
20 | Firecrawl is open source.
21 | Star us to show your support! 22 |
23 |
24 | 21 | Star us to show your support! 22 |
24 |
25 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/components/shared/header/Dropdown/Stories/Flame/Flame.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { HTMLAttributes, useEffect, useRef } from "react";
4 |
5 | import data from "@/components/app/(home)/sections/hero-flame/data.json";
6 | import { cn } from "@/utils/cn";
7 | import { setIntervalOnVisible } from "@/utils/set-timeout-on-visible";
8 |
9 | export default function StoriesFlame(attrs: HTMLAttributes
29 | {NAV_ITEMS.map((item) => (
30 |
31 |
33 | ))}
34 |
35 |
36 |
37 |
45 |
46 |
47 |
42 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/components/shared/header/Dropdown/Stories/Stories.tsx:
--------------------------------------------------------------------------------
1 | import ArrowUp from "./_svg/ArrowUp";
2 | import Replit from "./_svg/Replit";
3 | import StoriesFlame from "./Flame/Flame";
4 |
5 | export default function HeaderDropdownStories() {
6 | return (
7 |
11 |
50 |
59 |
60 |
12 |
20 |
21 |
13 | Customer story
14 |
15 |
16 |
17 |
19 |
24 | How Replit uses Firecrawl to
25 | power Replit Agent
26 |
27 |
28 |
37 | {children}
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/components/shared/icons/GitHub.tsx:
--------------------------------------------------------------------------------
1 | const GitHub = ({ ...props }) => {
2 | return (
3 |
18 | );
19 | };
20 |
21 | export default GitHub;
22 |
--------------------------------------------------------------------------------
/components/shared/icons/Logo.tsx:
--------------------------------------------------------------------------------
1 | const Logo = ({ ...props }) => (
2 |
18 | );
19 | export default Logo;
20 |
--------------------------------------------------------------------------------
/components/shared/icons/animated-chevron.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 | import { ChevronDown, ChevronUp } from "lucide-react";
5 | import { motion, AnimatePresence } from "framer-motion";
6 | import { cn } from "@/utils/cn";
7 |
8 | interface AnimatedChevronProps {
9 | isOpen: boolean;
10 | className?: string;
11 | size?: "sm" | "md" | "lg";
12 | }
13 |
14 | export function AnimatedChevron({
15 | isOpen,
16 | className,
17 | size = "md",
18 | }: AnimatedChevronProps) {
19 | const sizeClasses = {
20 | sm: "h-12 w-12",
21 | md: "h-16 w-16",
22 | lg: "h-20 w-20",
23 | };
24 |
25 | return (
26 |
27 |
28 | {isOpen ? (
29 |
36 |
44 | ) : (
45 |
52 |
60 | )}
61 |
62 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/components/shared/icons/arrow-animated.tsx:
--------------------------------------------------------------------------------
1 | import { cx } from "class-variance-authority";
2 |
3 | export function ArrowAnimated({
4 | className,
5 | ...props
6 | }: React.HTMLAttributes
7 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/components/shared/icons/symbol-colored.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const SymbolColored = ({ ...props }) => {
4 | return (
5 |
19 | );
20 | };
21 |
22 | export default SymbolColored;
23 |
--------------------------------------------------------------------------------
/components/shared/icons/symbol-white.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const SymbolWhite = ({ ...props }) => {
4 | return (
5 |
18 | );
19 | };
20 |
21 | export default SymbolWhite;
22 |
--------------------------------------------------------------------------------
/components/shared/image/Image.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @next/next/no-img-element */
2 | import { ComponentProps } from "react";
3 |
4 | import compressorConfig from "@/public/compressor.json";
5 |
6 | interface Props extends ComponentProps<"img"> {
7 | src: string;
8 | alt: string;
9 | raw?: boolean;
10 | }
11 |
12 | const BASE_SRC = "/assets/";
13 | const RAW_SRC = "/assets-original/";
14 |
15 | export default function Image({ src, raw, ...attrs }: Props) {
16 | if (raw) {
17 | return (
18 |
8 | {id && (
9 |
18 | 
54 | {children}
55 | {children}
54 |
8 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/components/shared/loading/usage-loading.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState, useEffect } from "react";
4 | import ScrambleText from "@/components/ui/motion/scramble-text";
5 |
6 | export function UsageLoadingText({ text = "Loading..." }: { text?: string }) {
7 | const [isInView, setIsInView] = useState(false);
8 |
9 | useEffect(() => {
10 | setIsInView(true);
11 | }, []);
12 |
13 | return (
14 |
9 |
26 |
15 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/components/shared/lockBody.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Utility to lock/unlock the document body based on a set of keys.
3 | * Each key can "lock" the body (e.g., prevent scrolling), and the lock is only released when all keys are removed.
4 | *
5 | * @param {string} key - Unique identifier for the lock (e.g., component name or id)
6 | * @param {'lock'|'unlock'} action - Whether to lock or unlock
7 | * @param {(locked: boolean) => void} [onLockChange] - Optional callback when lock state changes
8 | */
9 | const activeLocks = new Set
4 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/components/shared/logo-cloud/logo-cloud2/Logocloud.css:
--------------------------------------------------------------------------------
1 | .logocloud-items {
2 | animation: logocloud-items 100s infinite linear;
3 | will-change: transform;
4 | }
5 |
6 | @keyframes logocloud-items {
7 | 0% {
8 | transform: translateX(0);
9 | }
10 | 100% {
11 | transform: translateX(-50%);
12 | }
13 | }
14 |
15 | /* Allow this component to animate even when the user prefers reduced motion.
16 | This is a narrowly scoped opt-in to avoid disabling all animations globally. */
17 | @media (prefers-reduced-motion: reduce) {
18 | [data-allow-motion="true"] .logocloud-items {
19 | animation-duration: 100s !important;
20 | animation-iteration-count: infinite !important;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/components/shared/notifications/slack-notification.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useState } from "react";
4 |
5 | export default function SlackNotification({
6 | shouldNotify,
7 | onClick,
8 | }: {
9 | shouldNotify: boolean;
10 | onClick: () => void;
11 | }) {
12 | const [isOpen, setIsOpen] = useState(false);
13 |
14 | const handleClick = async () => {
15 | setIsOpen(false);
16 | if (onClick) {
17 | onClick();
18 | }
19 | };
20 |
21 | useEffect(() => {
22 | if (shouldNotify) {
23 | setIsOpen(true);
24 | }
25 | }, [shouldNotify]);
26 |
27 | return (
28 | <>
29 | 5 | Brought to you by 6 |
7 | 54 |
15 | 
24 | 
33 | 
42 | 
51 |
33 |
51 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/components/shared/pixi/PixiAssetManager.ts:
--------------------------------------------------------------------------------
1 | import { Assets } from "pixi.js";
2 |
3 | class PixiAssetManager {
4 | /**
5 | * Loads assets from the given sources
6 | * @param sources The source URLs of the assets
7 | * @returns A promise that resolves with the loaded asset(s)
8 | */
9 | public static load
34 |
50 |
35 | 
40 |
41 |
40 |
42 |
49 | 43 | New message in: #coach-gtm 44 |
45 | 46 | {`@CoachGTM: Your meeting prep for Pied Piper < > WindFlow Dynamics is ready! Meeting starts in 30 minutes`} 47 | 48 |
18 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/components/shared/ui/app-dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 | import { motion } from "framer-motion";
5 | import CurvyRect from "@/components/shared/layout/curvy-rect";
6 | import { cn } from "@/utils/cn";
7 | import {
8 | Dialog,
9 | DialogTrigger,
10 | DialogPortal,
11 | DialogOverlay,
12 | DialogClose,
13 | DialogHeader,
14 | DialogFooter,
15 | DialogTitle,
16 | DialogDescription,
17 | DialogContent as ShadDialogContent,
18 | } from "@/components/ui/shadcn/dialog";
19 |
20 | type AppDialogContentProps = React.ComponentPropsWithoutRef<
21 | typeof ShadDialogContent
22 | > & {
23 | withCurvyRect?: boolean;
24 | bodyClassName?: string;
25 | };
26 |
27 | export function AppDialogContent({
28 | className,
29 | children,
30 | withCurvyRect = true,
31 | bodyClassName,
32 | ...props
33 | }: AppDialogContentProps) {
34 | return (
35 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
53 |
35 |
36 |
37 |
38 |
52 |
39 |
51 |
40 | [{" "}
41 |
42 | {index.toString().padStart(2, "0")}
43 | {" "}
44 | / {max.toString().padStart(2, "0")} ]
45 |
46 |
47 | ·
48 |
49 | {title}
50 |
42 | {Array.from({ length: total }).map((_, i) => {
43 | const base = bases[i] ?? 0.8;
44 | return (
45 |
62 | );
63 | }
64 |
65 | export default DotGridLoader;
66 |
--------------------------------------------------------------------------------
/components/shared/ui/empty-state.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 | import { cn } from "@/utils/cn";
5 | import { AsciiExplosion } from "@/components/shared/effects/flame";
6 |
7 | interface EmptyStateProps {
8 | title?: string;
9 | description?: string;
10 | icon?: React.ReactNode;
11 | action?: React.ReactNode;
12 | showFlame?: boolean;
13 | className?: string;
14 | }
15 |
16 | export function EmptyState({
17 | title = "No data yet",
18 | description,
19 | icon,
20 | action,
21 | showFlame = true,
22 | className,
23 | }: EmptyStateProps) {
24 | return (
25 |
32 | {/* Subtle flame background */}
33 | {showFlame && (
34 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/components/shared/ui/index.ts:
--------------------------------------------------------------------------------
1 | // UI Components
2 | export { StatCard } from "./stat-card";
3 | export { LoadingState } from "./loading-state";
4 | export { EmptyState } from "./empty-state";
5 | export { default as CurvyRect } from "@/components/shared/layout/curvy-rect";
6 |
--------------------------------------------------------------------------------
/components/shared/ui/loading-state.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 | import { cn } from "@/utils/cn";
5 | import { CoreFlame } from "@/components/shared/effects/flame";
6 |
7 | interface LoadingStateProps {
8 | message?: string;
9 | showFlame?: boolean;
10 | size?: "sm" | "md" | "lg";
11 | className?: string;
12 | }
13 |
14 | export function LoadingState({
15 | message = "Loading...",
16 | showFlame = true,
17 | size = "md",
18 | className,
19 | }: LoadingStateProps) {
20 | const sizeClasses = {
21 | sm: "min-h-[200px]",
22 | md: "min-h-[300px]",
23 | lg: "min-h-[400px]",
24 | };
25 |
26 | const spinnerSizes = {
27 | sm: "w-6 h-6",
28 | md: "w-8 h-8",
29 | lg: "w-10 h-10",
30 | };
31 |
32 | return (
33 |
35 |
37 | )}
38 |
39 |
40 | {icon && (
41 |
55 | {icon}
42 | )}
43 |
44 |
45 |
52 |
53 | {action && {title}
46 | {description && ( 47 |48 | {description} 49 |
50 | )} 51 |{action}
}
54 |
40 | {/* Subtle pulsing flame */}
41 | {showFlame && (
42 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/components/shared/utils/portal-to-body.tsx:
--------------------------------------------------------------------------------
1 | import dynamic from "next/dynamic";
2 | import { createPortal } from "react-dom";
3 |
4 | function PortalToBody({ children }: { children: React.ReactNode }) {
5 | return createPortal(children, document.body);
6 | }
7 |
8 | export default dynamic(() => Promise.resolve(PortalToBody), { ssr: false });
9 |
--------------------------------------------------------------------------------
/components/ui/LoadingDots/LoadingDots.module.css:
--------------------------------------------------------------------------------
1 | .root {
2 | @apply inline-flex text-center items-center leading-7;
3 | }
4 |
5 | .root span {
6 | @apply bg-zinc-400 rounded-full h-2 w-2;
7 | animation-name: blink;
8 | animation-duration: 1.4s;
9 | animation-iteration-count: infinite;
10 | animation-fill-mode: both;
11 | margin: 0 2px;
12 | }
13 |
14 | .root span:nth-of-type(2) {
15 | animation-delay: 0.2s;
16 | }
17 |
18 | .root span:nth-of-type(3) {
19 | animation-delay: 0.4s;
20 | }
21 |
22 | @keyframes blink {
23 | 0% {
24 | opacity: 0.2;
25 | }
26 | 20% {
27 | opacity: 1;
28 | }
29 | 100% {
30 | opacity: 0.2;
31 | }
32 | }
--------------------------------------------------------------------------------
/components/ui/LoadingDots/LoadingDots.tsx:
--------------------------------------------------------------------------------
1 | import s from "./LoadingDots.module.css";
2 | import cn from "classnames";
3 |
4 | const LoadingDots = ({ className }: { className?: string }) => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 | );
12 | };
13 |
14 | export default LoadingDots;
15 |
--------------------------------------------------------------------------------
/components/ui/LoadingDots/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from "./LoadingDots";
2 |
--------------------------------------------------------------------------------
/components/ui/image.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @next/next/no-img-element */
2 | import { ComponentProps } from "react";
3 |
4 | import compressorConfig from "@/public/compressor.json";
5 |
6 | interface Props extends ComponentProps<"img"> {
7 | src: string;
8 | alt: string;
9 | raw?: boolean;
10 | }
11 |
12 | const BASE_SRC = "/assets/";
13 | const RAW_SRC = "/assets-original/";
14 |
15 | export default function Image({ src, raw, ...attrs }: Props) {
16 | if (raw) {
17 | return (
18 |
43 |
45 | )}
46 |
47 |
48 | {/* Spinner */}
49 |
55 |
56 | {/* Message */}
57 | {message && (
58 |
61 | {message}
59 | )} 60 |
54 |
37 |
53 | );
54 | }
55 |
56 | export default function LoadingDashboard({
57 | flameClassName,
58 | }: {
59 | flameClassName: string;
60 | }) {
61 | return (
62 |
38 |
51 |
52 |
63 |
66 | );
67 | }
68 |
--------------------------------------------------------------------------------
/components/ui/magic/animated-shiny-text-lw.tsx:
--------------------------------------------------------------------------------
1 | import { CSSProperties, FC, ReactNode } from "react";
2 |
3 | import { cn } from "@/utils/cn";
4 |
5 | interface AnimatedShinyTextProps {
6 | children: ReactNode;
7 | className?: string;
8 | shimmerWidth?: number;
9 | }
10 |
11 | const AnimatedShinyTextLw: FCLoading...
65 |35 | {children} 36 |
37 | ); 38 | }; 39 | 40 | export default AnimatedShinyTextLw; 41 | -------------------------------------------------------------------------------- /components/ui/magic/animated-shiny-text.tsx: -------------------------------------------------------------------------------- 1 | import { CSSProperties, FC, ReactNode } from "react"; 2 | 3 | import { cn } from "@/utils/cn"; 4 | 5 | interface AnimatedShinyTextProps { 6 | children: ReactNode; 7 | className?: string; 8 | shimmerWidth?: number; 9 | } 10 | 11 | const AnimatedShinyText: FC35 | {children} 36 |
37 | ); 38 | }; 39 | 40 | export default AnimatedShinyText; 41 | -------------------------------------------------------------------------------- /components/ui/magic/dot-pattern.tsx: -------------------------------------------------------------------------------- 1 | import { useId } from "react"; 2 | 3 | import { cn } from "@/utils/cn"; 4 | 5 | interface DotPatternProps { 6 | width?: any; 7 | height?: any; 8 | x?: any; 9 | y?: any; 10 | cx?: any; 11 | cy?: any; 12 | cr?: any; 13 | className?: string; 14 | [key: string]: any; 15 | } 16 | export function DotPattern({ 17 | width = 16, 18 | height = 16, 19 | x = 0, 20 | y = 0, 21 | cx = 1, 22 | cy = 1, 23 | cr = 1, 24 | className, 25 | ...props 26 | }: DotPatternProps) { 27 | const id = useId(); 28 | 29 | return ( 30 | 53 | ); 54 | } 55 | 56 | export default DotPattern; 57 | -------------------------------------------------------------------------------- /components/ui/magic/gradual-spacing.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { AnimatePresence, motion, Variants } from "framer-motion"; 4 | 5 | import { cn } from "@/utils/cn"; 6 | 7 | interface GradualSpacingProps { 8 | text: string; 9 | duration?: number; 10 | delayMultiple?: number; 11 | framerProps?: Variants; 12 | className?: string; 13 | } 14 | 15 | export default function GradualSpacing({ 16 | text, 17 | duration = 0.5, 18 | delayMultiple = 0.04, 19 | framerProps = { 20 | hidden: { opacity: 0, x: -20 }, 21 | visible: { opacity: 1, x: 0 }, 22 | }, 23 | className, 24 | }: GradualSpacingProps) { 25 | return ( 26 |
27 |
28 | {text.split("").map((char, i) => (
29 |
38 | {char === " " ? : char}
39 |
40 | ))}
41 |
42 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/components/ui/magic/ripple.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 |
3 | interface RippleProps {
4 | mainCircleSize?: number;
5 | mainCircleOpacity?: number;
6 | numCircles?: number;
7 | }
8 |
9 | const Ripple = React.memo(function Ripple({
10 | mainCircleSize = 210,
11 | mainCircleOpacity = 0.24,
12 | numCircles = 8,
13 | }: RippleProps) {
14 | return (
15 |
16 | {Array.from({ length: numCircles }, (_, i) => {
17 | const size = mainCircleSize + i * 70;
18 | const opacity = mainCircleOpacity - i * 0.03;
19 | const animationDelay = `${i * 0.06}s`;
20 | const borderStyle = i === numCircles - 1 ? "dashed" : "solid";
21 | const borderOpacity = 5 + i * 5;
22 |
23 | return (
24 |
39 | );
40 | })}
41 |
42 | );
43 | });
44 |
45 | Ripple.displayName = "Ripple";
46 |
47 | export default Ripple;
48 |
--------------------------------------------------------------------------------
/components/ui/menu-header.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 | import { X } from "lucide-react";
5 | import { cn } from "@/utils/cn";
6 |
7 | interface MenuHeaderProps {
8 | title: string;
9 | onClose?: () => void;
10 | className?: string;
11 | }
12 |
13 | export function MenuHeader({ title, onClose, className }: MenuHeaderProps) {
14 | return (
15 |
21 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/components/ui/modal.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 |
3 | import { motion, AnimatePresence } from "motion/react";
4 |
5 | export interface ModalProps {
6 | children?: ReactNode;
7 | contentClassName?: string;
8 |
9 | isOpen: boolean;
10 | setIsOpen: (open: boolean) => void;
11 | }
12 |
13 | export default function Modal({ children, isOpen, setIsOpen }: ModalProps) {
14 | return (
15 | {title}
22 | {onClose && ( 23 | 34 | )} 35 |
15 |
16 |
24 | );
25 | }
26 |
27 | export default Badge;
28 | export { Badge };
29 |
--------------------------------------------------------------------------------
/components/ui/shadcn/checkbox.tsx:
--------------------------------------------------------------------------------
1 | import { AnimatePresence, motion } from "motion/react";
2 |
3 | import { cn } from "@/utils/cn";
4 |
5 | export default function Checkbox({
6 | checked,
7 | onChange,
8 | }: {
9 | checked: boolean;
10 | onChange?: (checked: boolean) => void;
11 | }) {
12 | return (
13 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/components/ui/shadcn/collapsible.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
4 |
5 | const Collapsible = CollapsiblePrimitive.Root;
6 |
7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
8 |
9 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
10 |
11 | export { Collapsible, CollapsibleTrigger, CollapsibleContent };
12 |
--------------------------------------------------------------------------------
/components/ui/shadcn/input.tsx:
--------------------------------------------------------------------------------
1 | import { forwardRef } from "react";
2 | import { cn } from "@/utils/cn";
3 |
4 | const Input = forwardRef<
5 | HTMLInputElement,
6 | React.ComponentPropsWithoutRef<"input">
7 | >(({ className, ...props }, ref) => {
8 | return (
9 |
24 | );
25 | });
26 |
27 | Input.displayName = "Input";
28 |
29 | export default Input;
30 |
--------------------------------------------------------------------------------
/components/ui/shadcn/label.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as LabelPrimitive from "@radix-ui/react-label";
5 | import { cva, type VariantProps } from "class-variance-authority";
6 |
7 | import { cn } from "@/utils/cn";
8 |
9 | const labelVariants = cva(
10 | "text-sm leading-tight peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
11 | );
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef
17 | //
18 |
19 | {attrs.children}
20 |
21 | //
22 |
23 |