Link Embed

Usage

import ZyfloLinkEmbed from "@/components/zyflo/link-embed"

export default function LinkEmbedExample() {
  return (
    <ZyfloLinkEmbed
      url="https://example.com"
      variant="card"
      disableAnimations={false}
      backdropBlur={true}
      triggerWhenInView={true}
    />
  )
}

Examples

Props

Quick Props Overview

Detailed Props Overview

url

• Type: string
• Required: Yes

The URL of the website to embed.

variant

• Type: ZyfloLinkEmbedVariant
• Default: "card"
• Possible values: "card", "light", "info", "warning", "danger", "success", "default", "outline", "secondary", "transparent", "gradient"

Defines the visual style of the link embed.

disableAnimations

• Type: boolean
• Default: false

If set to true, disables all animations in the link embed.

backdropBlur

• Type: boolean
• Default: true

If set to true, applies a backdrop blur effect to the link embed.

triggerWhenInView

• Type: boolean
• Default: true

If set to true, triggers animations when the component comes into view.

srOnly

• Type: string
• Optional

Adds a span with the sr-only class containing the provided text. This text will be invisible on screen but readable by screen readers.

label

• Type: string
• Optional

Adds an aria-label attribute to the link embed element. This provides an accessible name for the link embed, which can be useful for screen readers.

Variants

The ZyfloLinkEmbed component supports the following variants:

Customization

The component uses Tailwind CSS classes for styling. You can customize its appearance by modifying the CSS classes in the component's source code or by passing additional classes through the className prop.

Accessibility

The component is designed with accessibility in mind:

• It uses semantic HTML elements for proper structure.
• The srOnly prop allows you to provide additional context for screen readers without affecting the visual appearance.
• The label prop provides a way to add an accessible name to the link embed, enhancing its description for screen readers.
• The component supports keyboard focus and includes appropriate focus styles.

Notes

• The component uses Framer Motion for animations. Make sure you have Framer Motion installed in your project if you plan to use animations.
• The gradient variant automatically adjusts its text color based on the primary color to ensure proper contrast.
• The component fetches metadata from the provided URL to display the link preview. Ensure that the URLs you're embedding allow cross-origin requests or use a proxy server to avoid CORS issues.

Contributing

If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on our GitHub repository. We appreciate your contributions and are always open to collaboration.

Thank you for considering contributing to Zyflo!