✨ Add Call to Action button component and update related files (#67)

* ✨ Add Call to Action button component and update related files

* ✨ Rename button component from 'Buttont' to 'CallToAction' for clarity

* ✨ Rename GithubStars component file for consistency and update import paths

* ✨ Update import path for GithubStarsButton component for consistency

Author: damien-schneider

apps/website/src/changelogs/2024-12-06.mdx

@@ -4,4 +4,5 @@ title: Sidemenu with smooth hover effect
 
 #### New component
 
-- A new component has been added to the website: the `Sidemenu smooth hover` component in the navigation category.
+- A new component has been added to the website: the `Sidemenu smooth hover` component in the navigation category.
+- A new button has been added to the website: the `Call to action` button in the button category.

apps/website/src/ui/star-github-project-button.tsx

@@ -2,7 +2,7 @@ export const dynamic = "force-static";
 
 import { CUICUI_GITHUB_URL } from "../lib/site.const";
 
-import { GithubStarsButton } from "@/cuicui/common-ui/buttons/github-stars/component.github-stars";
+import { GithubStarsButton } from "@/cuicui/common-ui/buttons/github-stars/github-stars";
 
 export default async function StarCuicuiGithubButton() {
   const apiGithub = "https://api.github.com/repos/damien-schneider/cuicui";

packages/ui/cuicui/common-ui/buttons/call-to-action-button/call-to-action-button.variant.tsx

@@ -0,0 +1,19 @@
+import { ArrowRightIcon } from "lucide-react";
+
+export default function CallToAction() {
+  return (
+    <button
+      type="button"
+      className="group relative flex flex-row items-center p-1 pr-3 text-sm gap-2 rounded-full border border-neutral-400/15 hover:border-neutral-400/30 shadow hover:shadow-sm overflow-hidden focus-visible:outline-none focus-visible:ring-neutral-600 focus-visible:ring-2 focus-visible:rounded-full transition duration-100 bg-neutral-400/5 hover:bg-neutral-400/10"
+    >
+      <div className="inline-flex items-center bg-brand dark:text-violet-300 text-violet-600 border border-violet-400/20 px-3 rounded-full text-sm py-1 bg-violet-400/20">
+        New version
+      </div>
+      <span className="dark:text-neutral-400 text-neutral-500">
+        Check out the new features
+      </span>
+      <ArrowRightIcon className="dark:text-neutral-400 text-neutral-500 size-5 group-hover:translate-x-1 transition-transform duration-100" />
+      <div className="absolute inset-0 -z-10 bg-gradient-to-br opacity-70 group-hover:opacity-100 transition-opacity overflow-hidden rounded-full from-violet-100 to-violet-300 backdrop-blur-md" />
+    </button>
+  );
+}

packages/ui/cuicui/common-ui/buttons/call-to-action-button/component.ts

@@ -0,0 +1,12 @@
+import type { ComponentMetaType } from "@/lib/types/component";
+
+export const Component: ComponentMetaType = {
+  name: "Call to action button",
+  description:
+    "A button that calls for action with a badge that can display a message.",
+  inspiration: "Supabase",
+  inspirationLink: "https://supabase.com/",
+  sizePreview: "xs",
+};
+
+export default Component;

packages/ui/cuicui/common-ui/buttons/github-stars/component.github-stars.tsx packages/ui/cuicui/common-ui/buttons/github-stars/github-stars.tsx

@@ -1,5 +1,5 @@
 import NumberFlow from "@number-flow/react";
-import "./github-stars.css";
+import "@/cuicui/common-ui/buttons/github-stars/github-stars.css";
 import Link from "next/link";
 import { cn } from "@/cuicui/utils/cn";
 import type { ComponentProps } from "react";
@@ -93,7 +93,7 @@ export const GithubStarsButton = ({
   );
 };
 
-const CuicuiStarIcon = ({ ...props }: React.SVGProps<SVGSVGElement>) => {
+const CuicuiStarIcon = ({ ...props }: ComponentProps<"svg">) => {
   return (
     <svg
       width="18"

packages/ui/cuicui/common-ui/buttons/github-stars/github-stars.variant.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { GithubStarsButton } from "@/cuicui/common-ui/buttons/github-stars/component.github-stars";
+import { GithubStarsButton } from "@/cuicui/common-ui/buttons/github-stars/github-stars";
 import { sleep } from "@/cuicui/utils/sleep";
 
 import { useEffect, useState } from "react";

packages/ui/cuicui/common-ui/buttons/magnetic-button/component.magnetic-background-button.tsx packages/ui/cuicui/common-ui/buttons/magnetic-button/magnetic-background-button.tsx

@@ -1,7 +1,13 @@
 "use client";
 
 import { cn } from "@/cuicui/utils/cn";
-import { useState, useRef, type ReactNode, type MouseEvent } from "react";
+import {
+  useState,
+  useRef,
+  type ReactNode,
+  type MouseEvent,
+  type ComponentProps,
+} from "react";
 
 type PositionType = {
   x: number;
@@ -19,7 +25,7 @@ export function MagneticBackgroundButton({
   magneticStrength?: number;
   className?: string;
   exitForce?: number;
-} & React.HTMLAttributes<HTMLButtonElement>) {
+} & ComponentProps<"button">) {
   const [position, setPosition] = useState<PositionType>({ x: 0, y: 0 });
   const [lastMousePosition, setLastMousePosition] = useState<{
     x: number;
@@ -60,7 +66,7 @@ export function MagneticBackgroundButton({
   };
 
   function getFarAwayLastPosition() {
-    if (!buttonRef.current || !lastMousePosition) {
+    if (!(buttonRef.current && lastMousePosition)) {
       return { x: 0, y: 0 };
     }
     const rect = buttonRef.current.getBoundingClientRect();

packages/ui/cuicui/common-ui/buttons/magnetic-button/magnetic-background-button.variant.tsx

@@ -1,4 +1,4 @@
-import { MagneticBackgroundButton } from "@/cuicui/common-ui/buttons/magnetic-button/component.magnetic-background-button";
+import { MagneticBackgroundButton } from "@/cuicui/common-ui/buttons/magnetic-button/magnetic-background-button";
 import { BedDoubleIcon, PopcornIcon, TvIcon, WavesIcon } from "lucide-react";
 
 export function PreviewMagneticBackgroundButton() {

packages/ui/cuicui/common-ui/buttons/magnetic-button/component.magnetic-button.tsx packages/ui/cuicui/common-ui/buttons/magnetic-button/magnetic-button.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState, useRef, type MouseEvent } from "react";
+import { useState, useRef, type MouseEvent, type ReactNode } from "react";
 import { motion, useMotionValue, useSpring } from "motion/react";
 
 const SPRING_CONFIG = { damping: 30, stiffness: 400 };
@@ -9,7 +9,7 @@ export const MagneticButton = ({
   children,
   ...props
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
 } & { height?: string }) => {
   const [isHovered, setIsHovered] = useState(false);
   const x = useMotionValue(0);

packages/ui/cuicui/common-ui/buttons/magnetic-button/magnetic-button.variant.tsx

@@ -1,4 +1,4 @@
-import { MagneticButton } from "@/cuicui/common-ui/buttons/magnetic-button/component.magnetic-button";
+import { MagneticButton } from "@/cuicui/common-ui/buttons/magnetic-button/magnetic-button";
 
 export function PreviewMagneticButton() {
   return (

packages/ui/cuicui/common-ui/buttons/shiny-rotating-border-button/component.shiny-rotating-border-button.tsx packages/ui/cuicui/common-ui/buttons/shiny-rotating-border-button/shiny-rotating-border-button.tsx

@@ -1,7 +1,11 @@
-import { ShinyRotatingBorderButton } from "@/cuicui/common-ui/buttons/shiny-rotating-border-button/component.shiny-rotating-border-button";
+import { ShinyRotatingBorderButton } from "@/cuicui/common-ui/buttons/shiny-rotating-border-button/shiny-rotating-border-button";
 
 export const PreviewShinyRotatingBorderButton = () => {
-  return <ShinyRotatingBorderButton>Click</ShinyRotatingBorderButton>;
+  return (
+    <ShinyRotatingBorderButton>
+      ✨ This button is shiny
+    </ShinyRotatingBorderButton>
+  );
 };
 
 export default PreviewShinyRotatingBorderButton;

packages/ui/cuicui/common-ui/buttons/shiny-rotating-border-button/shiny-rotating-border-button.variant.tsx

@@ -8,3 +8,5 @@ export const useTextToSpeechCategory: CategoryMetaType = {
   isComingSoon: true,
   icon: SpeechIcon,
 };
+
+export default useTextToSpeechCategory;

packages/ui/cuicui/hooks/use-text-to-speech/category.ts

@@ -11,7 +11,7 @@ import { type TTSHookResponse, useTts } from "tts-react";
 
 export const PreviewUseTextToSpeechAdvancedDemo = () => {
   if (typeof window === "undefined") {
-    return null;
+    return <p>Your browser does not support SpeechSynthesis</p>;
   }
   const [pitch, setPitch] = useState(1);
   const [volume, setVolume] = useState(1);

packages/ui/cuicui/hooks/use-text-to-speech/hook/advanced-demo.variant.tsx

@@ -60,6 +60,7 @@ import hooks_use_session_storage_category from "@/cuicui/hooks/use-session-stora
 import hooks_use_speech_to_text_category from "@/cuicui/hooks/use-speech-to-text/category";
 import hooks_use_step_category from "@/cuicui/hooks/use-step/category";
 import hooks_use_stopwatch_category from "@/cuicui/hooks/use-stopwatch/category";
+import hooks_use_text_to_speech_category from "@/cuicui/hooks/use-text-to-speech/category";
 import hooks_use_throttle_category from "@/cuicui/hooks/use-throttle/category";
 import hooks_use_video_category from "@/cuicui/hooks/use-video/category";
 import hooks_use_window_scroll_position_category from "@/cuicui/hooks/use-window-scroll-position/category";
@@ -110,6 +111,7 @@ import common_ui_badges_clerk_badge_component from "@/cuicui/common-ui/badges/cl
 import common_ui_badges_modern_simple_badges_component from "@/cuicui/common-ui/badges/modern-simple-badges/component";
 import common_ui_blockquotes_modern_simple_quote_component from "@/cuicui/common-ui/blockquotes/modern-simple-quote/component";
 import common_ui_buttons_before_effect_button_component from "@/cuicui/common-ui/buttons/before-effect-button/component";
+import common_ui_buttons_call_to_action_button_component from "@/cuicui/common-ui/buttons/call-to-action-button/component";
 import common_ui_buttons_dual_action_button_component from "@/cuicui/common-ui/buttons/dual-action-button/component";
 import common_ui_buttons_github_stars_component from "@/cuicui/common-ui/buttons/github-stars/component";
 import common_ui_buttons_growing_button_component from "@/cuicui/common-ui/buttons/growing-button/component";
@@ -156,6 +158,7 @@ import hooks_use_session_storage_hook_component from "@/cuicui/hooks/use-session
 import hooks_use_speech_to_text_hook_component from "@/cuicui/hooks/use-speech-to-text/hook/component";
 import hooks_use_step_hook_component from "@/cuicui/hooks/use-step/hook/component";
 import hooks_use_stopwatch_hook_component from "@/cuicui/hooks/use-stopwatch/hook/component";
+import hooks_use_text_to_speech_hook_component from "@/cuicui/hooks/use-text-to-speech/hook/component";
 import hooks_use_throttle_hook_component from "@/cuicui/hooks/use-throttle/hook/component";
 import hooks_use_video_hook_component from "@/cuicui/hooks/use-video/hook/component";
 import hooks_use_window_scroll_position_hook_component from "@/cuicui/hooks/use-window-scroll-position/hook/component";
@@ -230,6 +233,7 @@ import common_ui_blockquotes_modern_simple_quote_default_variant from "@/cuicui/
 import common_ui_buttons_before_effect_button_advanced_button_variant from "@/cuicui/common-ui/buttons/before-effect-button/advanced-button.variant";
 import common_ui_buttons_before_effect_button_default_variant from "@/cuicui/common-ui/buttons/before-effect-button/default.variant";
 import common_ui_buttons_before_effect_button_hover_only_variant from "@/cuicui/common-ui/buttons/before-effect-button/hover-only.variant";
+import common_ui_buttons_call_to_action_button_call_to_action_button_variant from "@/cuicui/common-ui/buttons/call-to-action-button/call-to-action-button.variant";
 import common_ui_buttons_dual_action_button_dual_action_button_variant from "@/cuicui/common-ui/buttons/dual-action-button/dual-action-button.variant";
 import common_ui_buttons_github_stars_github_stars_variant from "@/cuicui/common-ui/buttons/github-stars/github-stars.variant";
 import common_ui_buttons_github_stars_gradient_container_variant from "@/cuicui/common-ui/buttons/github-stars/gradient-container.variant";
@@ -284,6 +288,8 @@ import hooks_use_session_storage_hook_session_storage_variant from "@/cuicui/hoo
 import hooks_use_speech_to_text_hook_use_speech_to_text_variant from "@/cuicui/hooks/use-speech-to-text/hook/use-speech-to-text.variant";
 import hooks_use_step_hook_use_step_variant from "@/cuicui/hooks/use-step/hook/use-step.variant";
 import hooks_use_stopwatch_hook_use_stopwatch_variant from "@/cuicui/hooks/use-stopwatch/hook/use-stopwatch.variant";
+import hooks_use_text_to_speech_hook_advanced_demo_variant from "@/cuicui/hooks/use-text-to-speech/hook/advanced-demo.variant";
+import hooks_use_text_to_speech_hook_use_text_to_speech_variant from "@/cuicui/hooks/use-text-to-speech/hook/use-text-to-speech.variant";
 import hooks_use_throttle_hook_use_throttle_variant from "@/cuicui/hooks/use-throttle/hook/use-throttle.variant";
 import hooks_use_video_hook_use_video_variant from "@/cuicui/hooks/use-video/hook/use-video.variant";
 import hooks_use_window_scroll_position_hook_use_window_scroll_position_variant from "@/cuicui/hooks/use-window-scroll-position/hook/use-window-scroll-position.variant";
@@ -949,6 +955,20 @@ export const sectionList: SectionType[] = [
               },
             ],
           },
+          {
+            meta: common_ui_buttons_call_to_action_button_component,
+            slug: "call-to-action-button",
+            variants: [
+              {
+                name: "call-to-action-button",
+                variantComponent:
+                  common_ui_buttons_call_to_action_button_call_to_action_button_variant,
+                slug: "call-to-action-button",
+                pathname:
+                  "cuicui/common-ui/buttons/call-to-action-button/call-to-action-button.variant.tsx",
+              },
+            ],
+          },
           {
             meta: common_ui_buttons_dual_action_button_component,
             slug: "dual-action-button",
@@ -1849,6 +1869,34 @@ export const sectionList: SectionType[] = [
           },
         ],
       },
+      {
+        meta: hooks_use_text_to_speech_category,
+        slug: "use-text-to-speech",
+        components: [
+          {
+            meta: hooks_use_text_to_speech_hook_component,
+            slug: "hook",
+            variants: [
+              {
+                name: "advanced-demo",
+                variantComponent:
+                  hooks_use_text_to_speech_hook_advanced_demo_variant,
+                slug: "advanced-demo",
+                pathname:
+                  "cuicui/hooks/use-text-to-speech/hook/advanced-demo.variant.tsx",
+              },
+              {
+                name: "use-text-to-speech",
+                variantComponent:
+                  hooks_use_text_to_speech_hook_use_text_to_speech_variant,
+                slug: "use-text-to-speech",
+                pathname:
+                  "cuicui/hooks/use-text-to-speech/hook/use-text-to-speech.variant.tsx",
+              },
+            ],
+          },
+        ],
+      },
       {
         meta: hooks_use_throttle_category,
         slug: "use-throttle",