@m5kdev/web-ui 0.1.4 → 0.2.0

package/src/components/app-header.tsx

@@ -1,40 +0,0 @@
-import { Fragment } from "react";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "#components/ui/breadcrumb";
-import { Separator } from "#components/ui/separator";
-import { SidebarTrigger } from "#components/ui/sidebar";
-
-export function AppHeader({ breadcrumbs }: { breadcrumbs: { label: string; href?: string }[] }) {
-  return (
-    <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-      <div className="flex items-center gap-2 px-4">
-        <SidebarTrigger className="-ml-1" />
-        <Separator orientation="vertical" className="mr-2 h-4" />
-        <Breadcrumb>
-          <BreadcrumbList>
-            {breadcrumbs.map(({ href, label }, index) => (
-              <Fragment key={`${label}-${index}`}>
-                <BreadcrumbItem>
-                  {href ? (
-                    <BreadcrumbLink href={href}>{label}</BreadcrumbLink>
-                  ) : (
-                    <BreadcrumbPage>{label}</BreadcrumbPage>
-                  )}
-                </BreadcrumbItem>
-                {index < breadcrumbs.length - 1 && (
-                  <BreadcrumbSeparator className="hidden md:block" />
-                )}
-              </Fragment>
-            ))}
-          </BreadcrumbList>
-        </Breadcrumb>
-      </div>
-    </header>
-  );
-}

package/src/components/blur-card.tsx

@@ -1,132 +0,0 @@
-import { motion } from "motion/react";
-import type { ReactNode } from "react";
-import { useState } from "react";
-import { Card } from "#components/ui/card";
-import { cn } from "#utils";
-
-function BlurCardHeader({
-  title,
-  subtitle,
-  type,
-  date,
-}: {
-  title: string;
-  subtitle: string;
-  type: string;
-  date: string;
-}) {
-  return (
-    <div className="w-full px-4 py-4">
-      <div className="hidden lg:block">
-        <div className="flex items-center justify-between">
-          <span className="text-lg font-semibold text-white drop-shadow-md">{title}</span>
-          <span className="inline-block rounded-full bg-white/20 text-xs text-white font-semibold px-2 py-0.5 drop-shadow-md">
-            {type}
-          </span>
-        </div>
-        <div className="flex items-center justify-between">
-          <span className="text-sm text-neutral-300 drop-shadow-md">{subtitle}</span>
-          <span className="text-xs text-neutral-300 drop-shadow-md italic">{date}</span>
-        </div>
-      </div>
-
-      <div className="block lg:hidden">
-        <div className="inline-block rounded-full bg-white/20 text-xs text-white font-semibold px-2 py-0.5 drop-shadow-md">
-          {type}
-        </div>
-        <div className="text-lg font-semibold text-white drop-shadow-md">{title}</div>
-        <div className="text-sm text-neutral-300 drop-shadow-md">{subtitle}</div>
-        <div className="text-xs text-neutral-300 drop-shadow-md italic">{date}</div>
-      </div>
-    </div>
-  );
-}
-
-interface BlurCardProps {
-  image: string;
-  title: string;
-  subtitle: string;
-  type: string;
-  date: string;
-  description: string;
-  className?: string;
-  link?: ReactNode;
-}
-
-export function BlurCard({
-  image,
-  title,
-  subtitle,
-  type,
-  date,
-  description,
-  className,
-  link,
-}: BlurCardProps) {
-  // Detect touch device
-  const isTouchDevice =
-    typeof window !== "undefined" && ("ontouchstart" in window || navigator.maxTouchPoints > 0);
-  const [isOpen, setIsOpen] = useState(false);
-
-  // Handler for tap on mobile
-  const handleCardClick = () => {
-    if (isTouchDevice) setIsOpen((open) => !open);
-  };
-
-  return (
-    <Card
-      className={cn(
-        "relative overflow-hidden p-0 h-80 w-full flex flex-col justify-start",
-        className
-      )}
-      onClick={isTouchDevice ? handleCardClick : undefined}
-      style={{ touchAction: "manipulation" }}
-    >
-      <motion.div
-        whileHover={isTouchDevice ? undefined : "hover"}
-        initial="rest"
-        animate={isTouchDevice && isOpen ? "hover" : "rest"}
-        className="relative w-full h-full flex flex-col justify-end"
-        style={{
-          backgroundImage: `url(${image})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          height: "100%",
-        }}
-      >
-        {/* Overlay for blur and dim */}
-        <motion.div
-          variants={{
-            rest: { opacity: 0, backdropFilter: "blur(0px)" },
-            hover: { opacity: 1, backdropFilter: "blur(8px)" },
-          }}
-          transition={{ duration: 0.3, ease: "easeInOut" }}
-          className="absolute inset-0 z-10 bg-black/70 pointer-events-none rounded-xl"
-          style={{ WebkitBackdropFilter: "blur(8px)" }}
-        />
-        {/* Header wrapper */}
-        <motion.div
-          variants={{
-            rest: { height: "5rem" },
-            hover: { height: "100%" },
-          }}
-          transition={{ duration: 0.3, ease: "easeInOut" }}
-          className="w-full flex flex-col justify-start bg-black/70 pointer-events-none rounded-xl z-20"
-          style={{
-            overflow: "hidden",
-            WebkitBackdropFilter: "blur(8px)",
-            backdropFilter: "blur(8px)",
-          }}
-        >
-          <BlurCardHeader title={title} subtitle={subtitle} type={type} date={date} />
-          <div className="w-full h-full px-4 pb-4 flex flex-col justify-between">
-            <p className="text-neutral-100">{description}</p>
-            <div className="flex items-center justify-end pointer-events-auto">{link}</div>
-          </div>
-        </motion.div>
-        {/* For accessibility, add an invisible img tag */}
-        <img src={image} alt={title} className="invisible w-0 h-0" />
-      </motion.div>
-    </Card>
-  );
-}

package/src/components/features-section-demo-1.tsx

@@ -1,127 +0,0 @@
-import { useId } from "react";
-
-export default function FeaturesSectionDemo() {
-  return (
-    <div className="py-20 lg:py-40">
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 md:gap-2 max-w-7xl mx-auto">
-        {grid.map((feature) => (
-          <div
-            key={feature.title}
-            className="relative bg-gradient-to-b dark:from-neutral-900 from-neutral-100 dark:to-neutral-950 to-white p-6 rounded-3xl overflow-hidden"
-          >
-            <Grid size={20} />
-            <p className="text-base font-bold text-neutral-800 dark:text-white relative z-20">
-              {feature.title}
-            </p>
-            <p className="text-neutral-600 dark:text-neutral-400 mt-4 text-base font-normal relative z-20">
-              {feature.description}
-            </p>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-const grid = [
-  {
-    title: "HIPAA and SOC2 Compliant",
-    description:
-      "Our applications are HIPAA and SOC2 compliant, your data is safe with us, always.",
-  },
-  {
-    title: "Automated Social Media Posting",
-    description:
-      "Schedule and automate your social media posts across multiple platforms to save time and maintain a consistent online presence.",
-  },
-  {
-    title: "Advanced Analytics",
-    description:
-      "Gain insights into your social media performance with detailed analytics and reporting tools to measure engagement and ROI.",
-  },
-  {
-    title: "Content Calendar",
-    description:
-      "Plan and organize your social media content with an intuitive calendar view, ensuring you never miss a post.",
-  },
-  {
-    title: "Audience Targeting",
-    description:
-      "Reach the right audience with advanced targeting options, including demographics, interests, and behaviors.",
-  },
-  {
-    title: "Social Listening",
-    description:
-      "Monitor social media conversations and trends to stay informed about what your audience is saying and respond in real-time.",
-  },
-  {
-    title: "Customizable Templates",
-    description:
-      "Create stunning social media posts with our customizable templates, designed to fit your brand's unique style and voice.",
-  },
-  {
-    title: "Collaboration Tools",
-    description:
-      "Work seamlessly with your team using our collaboration tools, allowing you to assign tasks, share drafts, and provide feedback in real-time.",
-  },
-];
-
-export const Grid = ({ pattern, size }: { pattern?: number[][]; size?: number }) => {
-  const p = pattern ?? [
-    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
-    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
-    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
-    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
-    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
-  ];
-  return (
-    <div className="pointer-events-none absolute left-1/2 top-0  -ml-20 -mt-2 h-full w-full [mask-image:linear-gradient(white,transparent)]">
-      <div className="absolute inset-0 bg-gradient-to-r  [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-zinc-900/30 from-zinc-100/30 to-zinc-300/30 dark:to-zinc-900/30 opacity-100">
-        <GridPattern
-          width={size ?? 20}
-          height={size ?? 20}
-          x="-12"
-          y="4"
-          squares={p}
-          className="absolute inset-0 h-full w-full  mix-blend-overlay dark:fill-white/10 dark:stroke-white/10 stroke-black/10 fill-black/10"
-        />
-      </div>
-    </div>
-  );
-};
-
-export function GridPattern({ width, height, x, y, squares, ...props }: any) {
-  const patternId = useId();
-
-  return (
-    <svg aria-hidden="true" {...props}>
-      <defs>
-        <pattern
-          id={patternId}
-          width={width}
-          height={height}
-          patternUnits="userSpaceOnUse"
-          x={x}
-          y={y}
-        >
-          <path d={`M.5 ${height}V.5H${width}`} fill="none" />
-        </pattern>
-      </defs>
-      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${patternId})`} />
-      {squares && (
-        <svg x={x} y={y} className="overflow-visible">
-          {squares.map(([x, y]: any) => (
-            <rect
-              strokeWidth="0"
-              key={`${x}-${y}`}
-              width={width + 1}
-              height={height + 1}
-              x={x * width}
-              y={y * height}
-            />
-          ))}
-        </svg>
-      )}
-    </svg>
-  );
-}

package/src/components/features-section-demo-2.tsx

@@ -1,102 +0,0 @@
-import {
-  IconBlocks,
-  IconBooks,
-  IconCode,
-  IconMicroscope,
-  IconRocket,
-  IconSchool,
-  IconUser,
-  IconWriting,
-} from "@tabler/icons-react";
-import { cn } from "#utils";
-
-export default function FeaturesSectionDemo() {
-  const features = [
-    {
-      title: "Founder",
-      description: "I turn zero into one. Sometimes into ten.",
-      icon: <IconBlocks />,
-    },
-    {
-      title: "Entrepreneur",
-      description: "I chase opportunities, not job titles.",
-      icon: <IconRocket />,
-    },
-    {
-      title: "Developer",
-      description: "I speak fluent JavaScript and problem-solving.",
-      icon: <IconCode />,
-    },
-    {
-      title: "Mentor",
-      description: "Helping others skip the dumb mistakes I made.",
-      icon: <IconSchool />,
-    },
-    {
-      title: "Researcher",
-      description: "Curious by default. I dig deep before I build.",
-      icon: <IconMicroscope />,
-    },
-    {
-      title: "Thinker",
-      description: "Not everything I do ships — but it shapes what does.",
-      icon: <IconBooks />,
-    },
-    {
-      title: "Writer",
-      description: "Sometimes code, sometimes essays, sometimes late-night rambles.",
-      icon: <IconWriting />,
-    },
-    {
-      title: "Human",
-      description: "Imperfect. Learning. Figuring it out like the rest of us.",
-      icon: <IconUser />,
-    },
-  ];
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4  relative z-10 py-20 max-w-7xl mx-auto">
-      {features.map((feature, index) => (
-        <Feature key={feature.title} {...feature} index={index} />
-      ))}
-    </div>
-  );
-}
-
-const Feature = ({
-  title,
-  description,
-  icon,
-  index,
-}: {
-  title: string;
-  description: string;
-  icon: React.ReactNode;
-  index: number;
-}) => {
-  return (
-    <div
-      className={cn(
-        "flex flex-col lg:border-r  py-10 relative group/feature dark:border-neutral-800",
-        (index === 0 || index === 4) && "lg:border-l dark:border-neutral-800",
-        index < 4 && "lg:border-b dark:border-neutral-800"
-      )}
-    >
-      {index < 4 && (
-        <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
-      )}
-      {index >= 4 && (
-        <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
-      )}
-      <div className="mb-4 relative z-10 px-10 text-neutral-600 dark:text-neutral-400">{icon}</div>
-      <div className="text-lg font-bold mb-2 relative z-10 px-10">
-        <div className="absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-neutral-700 group-hover/feature:bg-blue-500 transition-all duration-200 origin-center" />
-        <span className="group-hover/feature:translate-x-2 transition duration-200 inline-block text-neutral-800 dark:text-neutral-100">
-          {title}
-        </span>
-      </div>
-      <p className="text-sm text-neutral-600 dark:text-neutral-300 max-w-xs relative z-10 px-10">
-        {description}
-      </p>
-    </div>
-  );
-};

package/src/components/features-section-demo-3.tsx

@@ -1,272 +0,0 @@
-import { IconBrandYoutubeFilled } from "@tabler/icons-react";
-import createGlobe from "cobe";
-import { motion } from "motion/react";
-import type React from "react";
-import { useEffect, useRef } from "react";
-import { cn } from "#utils";
-
-export default function FeaturesSectionDemo() {
-  const features = [
-    {
-      title: "Open Source Projects",
-      description: "Track and manage your project issues with ease using our intuitive interface.",
-      skeleton: <SkeletonOne />,
-      className: "col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800",
-    },
-    {
-      title: "Research Papers",
-      description: "Capture stunning photos effortlessly using our advanced AI technology.",
-      skeleton: <SkeletonTwo />,
-      className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
-    },
-    {
-      title: "Side Projects",
-      description:
-        "Whether its you or Tyler Durden, you can get to know about our product on YouTube",
-      skeleton: <SkeletonThree />,
-      className: "col-span-1 lg:col-span-3 lg:border-r  dark:border-neutral-800",
-    },
-    {
-      title: "Music",
-      description:
-        "With our blazing fast, state of the art, cutting edge, we are so back cloud servies (read AWS) - you can deploy your model in seconds.",
-      skeleton: <SkeletonFour />,
-      className: "col-span-1 lg:col-span-3 border-b lg:border-none",
-    },
-  ];
-  return (
-    <div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
-      <div className="px-8">
-        <h4 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
-          Packed with thousands of features
-        </h4>
-
-        <p className="text-sm lg:text-base  max-w-2xl  my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300">
-          From Image generation to video generation, Everything AI has APIs for literally
-          everything. It can even create this website copy for you.
-        </p>
-      </div>
-
-      <div className="relative ">
-        <div className="grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800">
-          {features.map((feature) => (
-            <FeatureCard key={feature.title} className={feature.className}>
-              <FeatureTitle>{feature.title}</FeatureTitle>
-              <FeatureDescription>{feature.description}</FeatureDescription>
-              <div className=" h-full w-full">{feature.skeleton}</div>
-            </FeatureCard>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-const FeatureCard = ({
-  children,
-  className,
-}: {
-  children?: React.ReactNode;
-  className?: string;
-}) => {
-  return <div className={cn("p-4 sm:p-8 relative overflow-hidden", className)}>{children}</div>;
-};
-
-const FeatureTitle = ({ children }: { children?: React.ReactNode }) => {
-  return (
-    <p className=" max-w-5xl mx-auto text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
-      {children}
-    </p>
-  );
-};
-
-const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
-  return (
-    <p
-      className={cn(
-        "text-sm md:text-base  max-w-4xl text-left mx-auto",
-        "text-neutral-500 text-center font-normal dark:text-neutral-300",
-        "text-left max-w-sm mx-0 md:text-sm my-2"
-      )}
-    >
-      {children}
-    </p>
-  );
-};
-
-export const SkeletonOne = () => {
-  return (
-    <div className="relative flex py-8 px-2 gap-10 h-full">
-      <div className="w-full  p-5  mx-auto bg-white dark:bg-neutral-900 shadow-2xl group h-full">
-        <div className="flex flex-1 w-full h-full flex-col space-y-2  ">
-          {/* TODO */}
-          <img
-            src="/linear.webp"
-            alt="header"
-            width={800}
-            height={800}
-            className="h-full w-full aspect-square object-cover object-left-top rounded-sm"
-          />
-        </div>
-      </div>
-
-      <div className="absolute bottom-0 z-40 inset-x-0 h-60 bg-gradient-to-t from-white dark:from-black via-white dark:via-black to-transparent w-full pointer-events-none" />
-      <div className="absolute top-0 z-40 inset-x-0 h-60 bg-gradient-to-b from-white dark:from-black via-transparent to-transparent w-full pointer-events-none" />
-    </div>
-  );
-};
-
-export const SkeletonThree = () => {
-  return (
-    <a
-      href="https://www.youtube.com/watch?v=RPa3_AD1_Vs"
-      target="__blank"
-      className="relative flex gap-10  h-full group/image"
-    >
-      <div className="w-full  mx-auto bg-transparent dark:bg-transparent group h-full">
-        <div className="flex flex-1 w-full h-full flex-col space-y-2  relative">
-          {/* TODO */}
-          <IconBrandYoutubeFilled className="h-20 w-20 absolute z-10 inset-0 text-red-500 m-auto " />
-          <img
-            src="https://assets.aceternity.com/fireship.jpg"
-            alt="header"
-            width={800}
-            height={800}
-            className="h-full w-full aspect-square object-cover object-center rounded-sm blur-none group-hover/image:blur-md transition-all duration-200"
-          />
-        </div>
-      </div>
-    </a>
-  );
-};
-
-export const SkeletonTwo = () => {
-  const images = [
-    "https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    "https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    "https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    "https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    "https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  ];
-
-  const imageVariants = {
-    whileHover: {
-      scale: 1.1,
-      rotate: 0,
-      zIndex: 100,
-    },
-    whileTap: {
-      scale: 1.1,
-      rotate: 0,
-      zIndex: 100,
-    },
-  };
-  return (
-    <div className="relative flex flex-col items-start p-8 gap-10 h-full overflow-hidden">
-      {/* TODO */}
-      <div className="flex flex-row -ml-20">
-        {images.map((image, idx) => (
-          <motion.div
-            variants={imageVariants}
-            key={"images-first" + idx}
-            style={{
-              rotate: Math.random() * 20 - 10,
-            }}
-            whileHover="whileHover"
-            whileTap="whileTap"
-            className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
-          >
-            <img
-              src={image}
-              alt="bali images"
-              width="500"
-              height="500"
-              className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
-            />
-          </motion.div>
-        ))}
-      </div>
-      <div className="flex flex-row">
-        {images.map((image, idx) => (
-          <motion.div
-            key={"images-second" + idx}
-            style={{
-              rotate: Math.random() * 20 - 10,
-            }}
-            variants={imageVariants}
-            whileHover="whileHover"
-            whileTap="whileTap"
-            className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
-          >
-            <img
-              src={image}
-              alt="bali images"
-              width="500"
-              height="500"
-              className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
-            />
-          </motion.div>
-        ))}
-      </div>
-
-      <div className="absolute left-0 z-[100] inset-y-0 w-20 bg-gradient-to-r from-white dark:from-black to-transparent  h-full pointer-events-none" />
-      <div className="absolute right-0 z-[100] inset-y-0 w-20 bg-gradient-to-l from-white dark:from-black  to-transparent h-full pointer-events-none" />
-    </div>
-  );
-};
-
-export const SkeletonFour = () => {
-  return (
-    <div className="h-60 md:h-60  flex flex-col items-center relative bg-transparent dark:bg-transparent mt-10">
-      <Globe className="absolute -right-10 md:-right-10 -bottom-80 md:-bottom-72" />
-    </div>
-  );
-};
-
-export const Globe = ({ className }: { className?: string }) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  useEffect(() => {
-    let phi = 0;
-
-    if (!canvasRef.current) return;
-
-    const globe = createGlobe(canvasRef.current, {
-      devicePixelRatio: 2,
-      width: 600 * 2,
-      height: 600 * 2,
-      phi: 0,
-      theta: 0,
-      dark: 1,
-      diffuse: 1.2,
-      mapSamples: 16000,
-      mapBrightness: 6,
-      baseColor: [0.3, 0.3, 0.3],
-      markerColor: [0.1, 0.8, 1],
-      glowColor: [1, 1, 1],
-      markers: [
-        // longitude latitude
-        { location: [37.7595, -122.4367], size: 0.03 },
-        { location: [40.7128, -74.006], size: 0.1 },
-      ],
-      onRender: (state) => {
-        // Called on every animation frame.
-        // `state` will be an empty object, return updated params.
-        state.phi = phi;
-        phi += 0.01;
-      },
-    });
-
-    return () => {
-      globe.destroy();
-    };
-  }, []);
-
-  return (
-    <canvas
-      ref={canvasRef}
-      style={{ width: 600, height: 600, maxWidth: "100%", aspectRatio: 1 }}
-      className={className}
-    />
-  );
-};