Refactor(UrlCard): Optimize UrlCard

src/components/common/UrlCard.tsx

@@ -0,0 +1,57 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
+import Icon from '@ant-design/icons'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import '@/assets/css/components/common/url-card.scss'
+import Card from '@/components/common/Card.tsx'
+import FlexBox from '@/components/common/FlexBox.tsx'
+
+interface UrlCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    icon: IconComponent
+    description?: ReactNode
+    options?: TiltOptions
+    url?: string
+}
+
+const UrlCard = ({
+    style,
+    icon,
+    description,
+    options = {
+        reverse: true,
+        max: 8,
+        glare: true,
+        scale: 1.03
+    },
+    url,
+    children,
+    ...props
+}: UrlCardProps) => {
+    const navigate = useNavigate()
+    const cardRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        cardRef.current && VanillaTilt.init(cardRef.current, options)
+    }, [options])
+
+    const handleCardOnClick = () => {
+        url && navigate(url)
+    }
+
+    return (
+        <Card
+            data-component={'component-url-card'}
+            style={{ overflow: 'visible', ...style }}
+            {...props}
+            ref={cardRef}
+            onClick={handleCardOnClick}
+        >
+            <FlexBox className={'url-card'}>
+                <Icon component={icon} className={'icon'} />
+                <div className={'text'}>{children}</div>
+                <div className={'description'}>{description}</div>
+            </FlexBox>
+        </Card>
+    )
+}
+
+export default UrlCard