JasonCode Component Documentation

Giới thiệu

JasonCode là một React component linh hoạt được xây dựng dựa trên HeroUI và Tailwind CSS. Nổi bật với khả năng tự động cào (fetch) dữ liệu Open Graph và favicon của một trang web từ URL, từ đó hiển thị thành một Button, Link, hoặc Icon cực kỳ đẹp mắt mà không cần truyền ảnh tĩnh một cách thủ công.

Cài đặt

Component phụ thuộc vào thư viện @heroui/react. Đảm bảo rằng dự án của bạn đã có HeroUI và Tailwind CSS.

npm install @heroui/react framer-motion

Ví dụ sử dụng (Usage)

1. Dạng Button (Mặc định)

<JasonCode url="https://github.com" label="Trang GitHub" />

2. Dạng Link

<JasonCode type="link" url="https://react.dev" label="React Docs" />

3. Dạng Icon (Tùy chọn kích thước)

<JasonCode type="icon" size="sm" url="https://google.com" />
<JasonCode type="icon" size="md" url="https://google.com" />
<JasonCode type="icon" size="lg" url="https://google.com" />
<JasonCode type="icon" size="xl" url="https://google.com" />

4. Render thủ công (Custom render)

<JasonCode 
  url="https://tailwindcss.com" 
  render={({ title, favicon, isLoading }) => (
    isLoading ? <span>Đang tải...</span> : (
      <div class="flex items-center gap-2 border p-2 rounded">
        <img src={favicon} width="24" />
        <span>{title}</span>
      </div>
    )
  )}
/>

Thuộc tính (Props)

Prop	Type	Default	Mô tả
url	string	"https://hwagfu.dev"	Đường dẫn đích cần lấy dữ liệu (favicon/tên trang).
label	string	"Jason Code Space"	Chữ hiển thị trong lúc chờ tải dữ liệu OG hoặc nếu tải thất bại.
type	'button' \| 'link' \| 'icon'	'button'	Giao diện chính để hiển thị Component.
size	'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Kích thước của chỉ áp dụng khi `type="icon"`.
className	string	""	Class (thường là Tailwind) áp dụng vào vùng bao ngoài cùng.
classNames	{ content?: string, image?: string }	{}	Cho phép style đè chi tiết lên icon (image) và chữ (content).
render	function	-	Hàm cho phép bạn tự render toàn bộ giao diện dựa trên dữ liệu hook trả về thay vì dùng UI có sẵn.