From 1762a8e1512921be4df83df2da29703596d1daad Mon Sep 17 00:00:00 2001 From: Hyden Liu Date: Tue, 9 Jul 2024 21:29:46 +0800 Subject: [PATCH 1/3] feat: `Text Underline` added --- config/docs.ts | 6 ++ content/docs/components/text-underline.mdx | 53 ++++++++++++++++ .../example/text-underline-demo.tsx | 28 +++++++++ .../components/magicui/text-underline.tsx | 60 +++++++++++++++++++ registry/index.tsx | 14 +++++ 5 files changed, 161 insertions(+) create mode 100644 content/docs/components/text-underline.mdx create mode 100644 registry/components/example/text-underline-demo.tsx create mode 100644 registry/components/magicui/text-underline.tsx diff --git a/config/docs.ts b/config/docs.ts index 53d6066fe..7921c8266 100644 --- a/config/docs.ts +++ b/config/docs.ts @@ -334,6 +334,12 @@ export const docsConfig: DocsConfig = { items: [], label: "", }, + { + title: "Text Underline", + href: `/docs/components/text-underline`, + items: [], + label: "New", + } ], }, { diff --git a/content/docs/components/text-underline.mdx b/content/docs/components/text-underline.mdx new file mode 100644 index 000000000..13b88384f --- /dev/null +++ b/content/docs/components/text-underline.mdx @@ -0,0 +1,53 @@ +--- +title: Text Underline +date: 2024-05-23 +description: Text underline animation +author: HydenLiu +published: true +--- + + + +## Installation + + + + + CLI + Manual + + + +```bash +npx magicui-cli add text-underline +``` + + + + + + + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + + + +## Props + +| Prop | Type | Description | Default | +| --------------- | ------------------ | --------------------------------------------- | -------- | +| className | string | The class name to be applied to the component | | +| lineStrokeWidth | number \| string | Default width of the line | "0.1rem" | +| duration | number | The class name to be applied to the shimmer | 0.5 | +| word | string | An array of words to rotate through | "" | +| startPlacement | "left" \| "right" | The position where this animation begin | "right" | +| endPlacement | "left" \| "right" | TThe position where this animation end | "left" | +| color | string \| string[] | Defines the color of the text line | "#000" | diff --git a/registry/components/example/text-underline-demo.tsx b/registry/components/example/text-underline-demo.tsx new file mode 100644 index 000000000..86a7cfe63 --- /dev/null +++ b/registry/components/example/text-underline-demo.tsx @@ -0,0 +1,28 @@ +import TextUnderline from "@/components/magicui/text-underline"; + +export default async function TextUnderlineDemo() { + return ( +
+ +
+ +
+ +
+ ); +} diff --git a/registry/components/magicui/text-underline.tsx b/registry/components/magicui/text-underline.tsx new file mode 100644 index 000000000..e4bac0626 --- /dev/null +++ b/registry/components/magicui/text-underline.tsx @@ -0,0 +1,60 @@ +"use client"; + +import { motion } from "framer-motion"; +import { cn } from "@/lib/utils"; + +interface Props { + word: string; + duration?: number; + className?: string; + color?: string | string[]; + lineStrokeWidth?: number | string; + startPlacement?: "left" | "right"; + endPlacement?: "left" | "right"; +} + +export default function TextUnderline({ + word, + duration = 0.5, + className, + color = "#000000", + lineStrokeWidth = "0.1rem", + startPlacement = "right", + endPlacement = "left", +}: Props) { + const lineStroke = + typeof lineStrokeWidth === "number" + ? `${lineStrokeWidth}px` + : lineStrokeWidth; + + const textVariants = { + initial: { + backgroundSize: `0% ${lineStroke}`, + backgroundPosition: `${startPlacement} bottom`, + }, + hover: { + backgroundSize: `100% ${lineStroke}`, + backgroundPosition: `${endPlacement} bottom`, + }, + }; + + const backgroundStyle = { + backgroundImage: `linear-gradient(to right, ${Array.isArray(color) ? color.join(",") : `${color}, ${color}`})`, + transitionDuration: `${duration}s`, + }; + + return ( + + {word} + + ); +} diff --git a/registry/index.tsx b/registry/index.tsx index 568af1b0f..68c61e2b8 100644 --- a/registry/index.tsx +++ b/registry/index.tsx @@ -178,6 +178,11 @@ const ui: Registry = { type: "components:magicui", files: ["registry/components/magicui/flip-text.tsx"], }, + "text-underline": { + name: "text-underline", + type: "components:magicui", + files: ["registry/components/magicui/text-underline.tsx"], + }, "icon-cloud": { name: "icon-cloud", type: "components:magicui", @@ -712,6 +717,15 @@ const example: Registry = { () => import("@/registry/components/example/flip-text-demo"), ), }, + "text-underline-demo": { + name: "text-underline-demo", + type: "components:example", + registryDependencies: ["text-underline"], + files: ["registry/components/example/text-underline-demo.tsx"], + component: React.lazy( + () => import("@/registry/components/example/text-underline-demo"), + ), + }, "sparkles-text-demo": { name: "sparkles-text-demo", type: "components:example", From 3c0bc13488a232d14b954b73e9c806fb5096efba Mon Sep 17 00:00:00 2001 From: Hyden Liu Date: Wed, 7 Aug 2024 11:01:29 +0800 Subject: [PATCH 2/3] fix(text-underline): making hover to div --- .../components/magicui/text-underline.tsx | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/registry/components/magicui/text-underline.tsx b/registry/components/magicui/text-underline.tsx index e4bac0626..220f9c553 100644 --- a/registry/components/magicui/text-underline.tsx +++ b/registry/components/magicui/text-underline.tsx @@ -44,17 +44,22 @@ export default function TextUnderline({ }; return ( - - {word} - + + {word} + + ); } From 81b676ed85e6a9bca33565a69c5fdc663e7ab818 Mon Sep 17 00:00:00 2001 From: Hyden Liu Date: Wed, 7 Aug 2024 11:06:25 +0800 Subject: [PATCH 3/3] chore: prettier format check --- config/docs.ts | 2 +- registry/components/magicui/text-underline.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/config/docs.ts b/config/docs.ts index 7921c8266..b60b4e79e 100644 --- a/config/docs.ts +++ b/config/docs.ts @@ -339,7 +339,7 @@ export const docsConfig: DocsConfig = { href: `/docs/components/text-underline`, items: [], label: "New", - } + }, ], }, { diff --git a/registry/components/magicui/text-underline.tsx b/registry/components/magicui/text-underline.tsx index 220f9c553..cbb6cccbe 100644 --- a/registry/components/magicui/text-underline.tsx +++ b/registry/components/magicui/text-underline.tsx @@ -1,6 +1,7 @@ "use client"; import { motion } from "framer-motion"; + import { cn } from "@/lib/utils"; interface Props {