mirror of
https://github.com/moumen-soliman/uitripled
synced 2026-04-21 13:37:20 +00:00
86378f1a26
Expose an author.username on Component and render a GitHub credit link in AnimationDetailPage, AnimationCard and the components landing cards. Add a new NativeMarquee component and demo (react-baseui) and register a Dashboard block and Native Marquee component in the registry (packages/registry public files). Fix registry paths for the flip-text resource and update native-user-card implementation content (motion/hover tweaks). Also update public llms timestamps. These changes wire up author attribution and add/register new UI pieces in the registry.
22 lines
No EOL
4.2 KiB
JSON
22 lines
No EOL
4.2 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "native-user-card-baseui",
|
|
"type": "registry:component",
|
|
"title": "Native User Card",
|
|
"description": "Compact user profile card with avatar, name, handle, and action button with spring animations (Base UI)",
|
|
"registryDependencies": [
|
|
"button"
|
|
],
|
|
"dependencies": [
|
|
"framer-motion",
|
|
"react"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "@uitripled/react-baseui/src/components/native/native-user-card-baseui.tsx",
|
|
"content": "\"use client\";\n\nimport { Avatar } from \"@base-ui/react/avatar\";\nimport { Button } from \"@base-ui/react/button\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, MotionConfig } from \"framer-motion\";\nimport { ArrowRight } from \"lucide-react\";\n\ninterface NativeUserCardProps {\n imageSrc: string;\n name: string;\n handle: string;\n href?: string;\n onClick?: () => void;\n className?: string;\n}\n\nconst transition = {\n type: \"spring\" as const,\n stiffness: 400,\n damping: 30,\n};\n\nexport function NativeUserCard({\n imageSrc,\n name,\n handle,\n href = \"#\",\n onClick,\n className,\n}: NativeUserCardProps) {\n const CardContent = (\n <motion.div\n initial=\"initial\"\n animate=\"animate\"\n whileHover=\"hover\"\n variants={{\n initial: { opacity: 0, scale: 0.98, y: 5 },\n animate: { opacity: 1, scale: 1, y: 0 },\n }}\n transition={transition}\n className={cn(\n \"group relative flex w-full max-w-full items-center justify-between gap-4 rounded-lg border border-border bg-card p-1 transition-all duration-300\",\n className\n )}\n >\n <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n <div className=\"relative h-10 w-10 shrink-0 overflow-hidden rounded-lg sm:h-12 sm:w-12\">\n <Avatar.Root className=\"h-full w-full rounded-lg\">\n <Avatar.Image src={imageSrc} alt={name} className=\"h-full w-full object-cover\" />\n <Avatar.Fallback className=\"flex h-full w-full items-center justify-center bg-muted text-muted-foreground font-semibold\">\n {name.charAt(0)}\n </Avatar.Fallback>\n </Avatar.Root>\n </div>\n\n <div className=\"flex min-w-0 flex-col\">\n <h3 className=\"truncate text-sm font-semibold leading-none tracking-tight text-foreground\">\n {name}\n </h3>\n <p className=\"truncate text-xs font-medium text-muted-foreground\">\n {handle}\n </p>\n </div>\n </div>\n\n <div className=\"relative shrink-0 pl-2\">\n <Button\n className={cn(\n \"flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-primary text-primary-foreground opacity-100 transition-transform duration-300 sm:h-12 sm:w-12\",\n \"outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n )}\n >\n <motion.div whileTap={{ scale: 0.95 }}>\n <motion.span\n className=\"inline-block\"\n variants={{\n hover: { x: 3 },\n }}\n transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n >\n <ArrowRight className=\"h-3 w-3\" />\n </motion.span>\n </motion.div>\n </Button>\n </div>\n </motion.div>\n );\n\n return (\n <MotionConfig transition={transition}>\n {onClick ? (\n <Button\n onClick={onClick}\n className=\"block w-full max-w-full text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-lg h-auto p-0 hover:bg-transparent\"\n aria-label={`View profile of ${name}`}\n >\n {CardContent}\n </Button>\n ) : (\n <a\n href={href}\n className=\"block w-full max-w-full outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-lg\"\n aria-label={`View profile of ${name}`}\n >\n {CardContent}\n </a>\n )}\n </MotionConfig>\n );\n}\n",
|
|
"type": "registry:component",
|
|
"target": "components/uitripled/native-user-card-baseui.tsx"
|
|
}
|
|
]
|
|
} |