{children}); } export function TestimonialAuthor({ className, children, ...props }: React.ComponentProps<"figcaption">) { return (
{children}
);
}
export function TestimonialAvatarImg({
className,
src,
alt,
...props
}: React.ComponentProps<"img">) {
return (
{children}
);
}
export function TestimonialAuthorBio({
className,
children,
...props
}: React.ComponentProps<"div">) {
return (
{children}
);
}
export function TestimonialVerifiedBadge({
className,
...props
}: React.ComponentProps<"svg">) {
return (
);
}
```
```tsx title="components/kibo-ui/marquee.tsx" showLineNumbers
"use client";
import type { HTMLAttributes } from "react";
import type { MarqueeProps as FastMarqueeProps } from "react-fast-marquee";
import FastMarquee from "react-fast-marquee";
import { cn } from "@/lib/utils";
export type MarqueeProps = HTMLAttributes
```
This works fine, but if the image has many colors, the fixed border may not blend well and can look distracting.
## A better way: Border that adapts to the image
Instead of setting the border color directly, you can use a wrapper with a subtle `ring`. This way, the border adapts better to the image content, creating a softer, more natural look: