بطاقة متوهجة (Glow Card)

يعرض تأثير بطاقة متوهجة (Glow Card) بطاقة يضيئها توهّج خفيف عند التمرير فوقها، ويمكن أن يتبع التوهّج مؤشر الفأرة.

التثبيت

bash

npx @smicolon/fasla-ui@latest add glow-card

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

معاينة

يستجيب توهّج البطاقة لمؤشر الفأرة: يضيء عند التمرير فوقها، ويتبع مؤشر الفأرة في البطاقة الثانية، لأنها تفعّل followMouse.

توصيل مجاني

لكل الطلبات داخل الرياض هذا الأسبوع.

إرجاع سهل

أرجع أي قطعة خلال 30 يومًا.

حاوية متوهجة

يرسم الجزء GlowContainer توهّجًا ينزلق حول الإطار باتجاه القراءة. يتحرك من تلقاء نفسه، ولا يستجيب لمؤشر الفأرة.

يحصل الأعضاء على وصول مبكر إلى تشكيلة الخريف.

إتاحة الوصول (accessibility)

التوهّج زخرفي، ويعمل محتوى البطاقة كالمعتاد.
مع hoverOnly لا يرى التوهّج من يستخدم لوحة المفاتيح أو شاشة اللمس، فلا تضع فيه شيئًا يحتاجون إليه.
إذا فعّل المستخدم إعداد prefers-reduced-motion، لا تُظهر GlowCard أي توهّج، ويبقى إطار GlowContainer ثابتًا.

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`	لا يوجد	محتوى البطاقة.
`glowColor`	`string`	`"var(--primary)"`	لون التوهّج.
`glowIntensity`	`number`	`60`	تمويه التوهّج بالبكسل.
`followMouse`	`boolean`	`false`	يحرّك التوهّج مع مؤشر الفأرة.
`hoverOnly`	`boolean`	`true`	يُظهر التوهّج عند التمرير فوق البطاقة فقط.
`GlowContainer`	`{ glowColor, duration }`	لا يوجد	حاوية ينزلق حول إطارها توهّج.
`className`	`string`	لا يوجد	أصناف (class) إضافية للمكوّن.

الاستخدام

GlowCard

tsx

import { GlowCard } from "@/components/ui/glow-card"

export function ReturnsCard() {
  return (
    <GlowCard glowColor="var(--chart-1)" followMouse>
      <div className="p-6">إرجاع سهل</div>
    </GlowCard>
  )
}

GlowContainer

tsx

import { GlowContainer } from "@/components/ui/glow-card"

export function MembersNotice() {
  return (
    <GlowContainer duration={2}>
      <p className="p-6">يحصل الأعضاء على وصول مبكر إلى تشكيلة الخريف.</p>
    </GlowContainer>
  )
}