motion-ui-skill 2.0.0

package/components/socials/github-repo-card.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+import { Github } from "@/icons/brands/github";
+import { Star } from "lucide-react";
+
+export type GitHubRepoCardProps = Readonly<
+  {
+    owner?: string;
+    name?: string;
+    description?: string;
+    language?: string;
+    languageColor?: string;
+    stars?: number;
+    forks?: number;
+    onStar?: (starred: boolean) => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Git Hub Repo component — styled with Tailwind CSS.
+export const GitHubRepoCard = forwardRef<HTMLDivElement, GitHubRepoCardProps>(
+  (
+    {
+      className,
+      owner = "alex-morgan",
+      name = "motion-ui",
+      description = "270+ production-ready Next.js UI components. Copy, paste, ship.",
+      language = "TypeScript",
+      languageColor = "bg-blue-500",
+      stars = 1284,
+      forks = 142,
+      onStar,
+      ...props
+    },
+    ref,
+  ) => {
+    const [starred, setStarred] = useState(false);
+    const [count, setCount] = useState(stars);
+
+    const toggleStar = () => {
+      const next = !starred;
+      setStarred(next);
+      setCount(next ? count + 1 : count - 1);
+      onStar?.(next);
+    };
+
+    return (
+      <div
+        ref={ref}
+        data-slot="github-repo-card"
+        className={cn(
+          "w-72 rounded-xl border border-neutral-100 bg-white p-4 font-sans shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        <div className="mb-2 flex items-start justify-between gap-2">
+          <div className="flex min-w-0 items-center gap-1.5">
+            <Github size={16} className="shrink-0 text-neutral-800" />
+            <span className="truncate text-[13px] text-neutral-600">
+              <span className="font-semibold text-neutral-900">{owner}</span>
+              <span className="text-neutral-400"> / </span>
+              <span className="font-semibold text-neutral-900">{name}</span>
+            </span>
+          </div>
+          <span className="shrink-0 rounded-full border border-neutral-200 px-2 py-0.5 text-[9px] font-medium text-neutral-500">
+            Public
+          </span>
+        </div>
+
+        <p className="mb-3 text-[12px] leading-relaxed text-neutral-600">
+          {description}
+        </p>
+
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3 text-[11px] text-neutral-500">
+            <span className="flex items-center gap-1">
+              <span className={cn("h-2.5 w-2.5 rounded-full", languageColor)} />
+              {language}
+            </span>
+            <span>{forks} forks</span>
+          </div>
+
+          <button
+            type="button"
+            onClick={toggleStar}
+            aria-pressed={starred}
+            data-slot="github-repo-card-star"
+            className={cn(
+              "flex cursor-pointer items-center gap-1 rounded-lg px-2.5 py-1 text-[11px] font-semibold transition-colors",
+              starred
+                ? "bg-amber-50 text-amber-700"
+                : "bg-neutral-50 text-neutral-700",
+            )}
+          >
+            <Star
+              size={12}
+              className={starred ? "fill-amber-500 text-amber-500" : ""}
+            />
+            {count.toLocaleString()}
+          </button>
+        </div>
+      </div>
+    );
+  },
+);
+
+GitHubRepoCard.displayName = "GitHubRepoCard";

package/components/socials/instagram-post-card.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+import {
+  Ellipsis,
+  ThumbsUp,
+  MessageCircle,
+  Bookmark,
+  Share2,
+} from "lucide-react";
+
+export type InstagramPostCardProps = Readonly<
+  {
+    username?: string;
+    location?: string;
+    likes?: number;
+    caption?: string;
+    hashtags?: string;
+    timestamp?: string;
+    avatar?: string;
+    postImage?: string;
+    avatarAlt?: string;
+    imageAlt?: string;
+    imagePriority?: boolean;
+    likeIcon?: ReactNode;
+    commentIcon?: ReactNode;
+    shareIcon?: ReactNode;
+    bookmarkIcon?: ReactNode;
+    onLike?: () => void;
+    onComment?: () => void;
+    onShare?: () => void;
+    onBookmark?: () => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Instagram Post component — styled with Tailwind CSS.
+export const InstagramPostCard = forwardRef<
+  HTMLDivElement,
+  InstagramPostCardProps
+>(
+  (
+    {
+      className,
+      username = "alex.dev",
+      location = "West Bengal, India",
+      likes = 1204,
+      caption = "New card UI drop. Minimal, clean, and open-source.",
+      hashtags = "#uidesign #reactjs #webdev",
+      timestamp = "2 hours ago",
+      avatar = "/profile-picture.png",
+      postImage = "/background1.webp",
+      avatarAlt = "User avatar",
+      imageAlt = "Instagram post image",
+      imagePriority = false,
+      likeIcon,
+      commentIcon,
+      shareIcon,
+      bookmarkIcon,
+      onLike,
+      onComment,
+      onShare,
+      onBookmark,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="instagram-post-card"
+        className={cn(
+          "w-xs overflow-hidden rounded-xl border border-neutral-100 bg-white font-sans shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        {/* Profile header */}
+        <div
+          data-slot="instagram-post-card-header"
+          className="flex items-center gap-2 px-3 py-2.5"
+        >
+          <div className="h-8 w-8 rounded-full bg-linear-to-tr from-yellow-400 via-pink-500 to-blue-600 p-0.5">
+            <div className="h-full w-full rounded-full bg-white p-0.5">
+              <div className="flex h-full w-full items-center justify-center rounded-full bg-neutral-900">
+                <Image
+                  src={avatar}
+                  alt={avatarAlt}
+                  width={16}
+                  height={16}
+                  className="w-4"
+                  sizes="16px"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <p
+              title={username}
+              className="text-xs font-semibold text-neutral-900"
+            >
+              {username}
+            </p>
+
+            <p title={location} className="text-[10px] text-neutral-400">
+              {location}
+            </p>
+          </div>
+
+          <button
+            type="button"
+            aria-label="More options"
+            className="ml-auto cursor-pointer text-neutral-400"
+          >
+            <Ellipsis size={15} aria-hidden />
+          </button>
+        </div>
+
+        {/* Post image */}
+        <div className="relative h-36 w-full">
+          <Image
+            data-slot="instagram-post-card-image"
+            src={postImage}
+            alt={imageAlt}
+            fill
+            className="object-cover"
+            sizes="320px"
+            priority={imagePriority}
+          />
+        </div>
+
+        {/* Post content */}
+        <div className="px-3 pt-2.5 pb-3">
+          {/* Engagement actions */}
+          <div
+            data-slot="instagram-post-card-actions"
+            className="mb-2 flex items-center justify-between"
+          >
+            <div className="flex items-center gap-3">
+              <button
+                type="button"
+                aria-label={`Like post from ${username}`}
+                onClick={onLike}
+                className="cursor-pointer text-neutral-700 transition-colors hover:text-black"
+              >
+                {likeIcon ?? <ThumbsUp size={15} />}
+              </button>
+
+              <button
+                type="button"
+                aria-label={`Comment on post from ${username}`}
+                onClick={onComment}
+                className="cursor-pointer text-neutral-700 transition-colors hover:text-black"
+              >
+                {commentIcon ?? <MessageCircle size={15} />}
+              </button>
+
+              <button
+                type="button"
+                aria-label={`Share post from ${username}`}
+                onClick={onShare}
+                className="cursor-pointer text-neutral-700 transition-colors hover:text-black"
+              >
+                {shareIcon ?? <Share2 size={15} />}
+              </button>
+            </div>
+
+            <button
+              type="button"
+              aria-label={`Save post from ${username}`}
+              onClick={onBookmark}
+              className="cursor-pointer text-neutral-700 transition-colors hover:text-black"
+            >
+              {bookmarkIcon ?? <Bookmark size={15} />}
+            </button>
+          </div>
+
+          <p className="mb-1 text-xs font-semibold text-neutral-900">
+            {likes.toLocaleString("en-US")} likes
+          </p>
+
+          <p className="text-xs leading-relaxed text-neutral-800">
+            <span className="font-semibold">{username}</span> {caption}{" "}
+            <span className="text-blue-500">{hashtags}</span>
+          </p>
+
+          <p className="mt-1 text-[10px] tracking-wide text-neutral-400 uppercase">
+            {timestamp}
+          </p>
+        </div>
+      </div>
+    );
+  },
+);
+
+InstagramPostCard.displayName = "InstagramPostCard";

package/components/socials/linked-in-post-card.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+import {
+  Clock,
+  Ellipsis,
+  ThumbsUp,
+  MessageCircle,
+  Repeat,
+  Share2,
+} from "lucide-react";
+
+export type LinkedInPostCardProps = Readonly<
+  {
+    username?: string;
+    headline?: string;
+    timestamp?: string;
+    content?: string;
+    hashtags?: string;
+    websiteName?: string;
+    websiteDescription?: string;
+    reactions?: number;
+    comments?: number;
+    reposts?: number;
+    avatar?: string;
+    avatarAlt?: string;
+    menuIcon?: ReactNode;
+    likeIcon?: ReactNode;
+    commentIcon?: ReactNode;
+    repostIcon?: ReactNode;
+    sendIcon?: ReactNode;
+    onLike?: () => void;
+    onComment?: () => void;
+    onRepost?: () => void;
+    onSend?: () => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Linked In Post component — styled with Tailwind CSS.
+export const LinkedInPostCard = forwardRef<
+  HTMLDivElement,
+  LinkedInPostCardProps
+>(
+  (
+    {
+      className,
+      username = "Alex Morgan",
+      headline = "Software Developer · 1st",
+      timestamp = "2h",
+      content = "Excited to share my latest open-source UI library — built with accessibility and performance in mind.",
+      hashtags = "#MotionUI #UI #React #FrontendDev",
+      websiteName = "nexticons.in",
+      websiteDescription = "Minimal, performant UI components for modern apps.",
+      reactions = 842,
+      comments = 57,
+      reposts = 23,
+      avatar = "/profile-picture.png",
+      avatarAlt = "User avatar",
+      menuIcon,
+      likeIcon,
+      commentIcon,
+      repostIcon,
+      sendIcon,
+      onLike,
+      onComment,
+      onRepost,
+      onSend,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="linkedin-post-card"
+        className={cn(
+          "w-sm rounded-xl border border-neutral-100 bg-white p-5 font-sans shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        {/* Post header */}
+        <div data-slot="linkedin-post-card-header" className="mb-3 flex gap-3">
+          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-neutral-800">
+            <Image
+              src={avatar}
+              alt={avatarAlt}
+              width={32}
+              height={32}
+              className="w-8"
+              sizes="32px"
+            />
+          </div>
+
+          <div>
+            <p
+              title={username}
+              className="text-sm font-semibold text-neutral-900"
+            >
+              {username}
+            </p>
+
+            <p title={headline} className="text-xs text-neutral-500">
+              {headline}
+            </p>
+
+            <p className="text-xs text-neutral-400">
+              {timestamp} · <Clock className="inline" size={12} />
+            </p>
+          </div>
+
+          <div className="ml-auto text-neutral-400">
+            {menuIcon ?? <Ellipsis size={15} />}
+          </div>
+        </div>
+
+        {/* Post content */}
+        <p
+          data-slot="linkedin-post-card-content"
+          className="mb-3 text-sm leading-relaxed text-neutral-800"
+        >
+          {content}
+          <br />
+          <span className="text-blue-600">{hashtags}</span>
+        </p>
+
+        {/* Link preview */}
+        <div
+          data-slot="linkedin-post-card-preview"
+          className="mb-3 rounded-lg border border-neutral-200 bg-neutral-50 p-3"
+        >
+          <p className="text-xs font-semibold text-neutral-800">
+            {websiteName}
+          </p>
+
+          <p className="text-xs text-neutral-500">{websiteDescription}</p>
+        </div>
+
+        {/* Engagement summary */}
+        <div
+          data-slot="linkedin-post-card-stats"
+          className="flex items-center justify-between border-t border-neutral-100 pt-3 text-xs text-neutral-500"
+        >
+          <span className="flex items-center gap-1">
+            {likeIcon ?? <ThumbsUp size={13} className="text-blue-600" />}
+            {reactions.toLocaleString()} reactions
+          </span>
+
+          <span>
+            {comments.toLocaleString()} comments · {reposts.toLocaleString()}{" "}
+            reposts
+          </span>
+        </div>
+
+        {/* Post actions */}
+        <div
+          data-slot="linkedin-post-card-actions"
+          className="mt-3 flex gap-1 border-t border-neutral-100 pt-3"
+        >
+          <button
+            type="button"
+            aria-label={`Like post from ${username}`}
+            onClick={onLike}
+            className="flex flex-1 cursor-pointer flex-col items-center gap-1 rounded-md py-1 text-[11px] font-medium text-neutral-500 transition-colors hover:bg-neutral-50 hover:text-neutral-900"
+          >
+            {likeIcon ?? <ThumbsUp size={14} />}
+            Like
+          </button>
+
+          <button
+            type="button"
+            aria-label={`Comment on post from ${username}`}
+            onClick={onComment}
+            className="flex flex-1 cursor-pointer flex-col items-center gap-1 rounded-md py-1 text-[11px] font-medium text-neutral-500 transition-colors hover:bg-neutral-50 hover:text-neutral-900"
+          >
+            {commentIcon ?? <MessageCircle size={14} />}
+            Comment
+          </button>
+
+          <button
+            type="button"
+            aria-label={`Repost post from ${username}`}
+            onClick={onRepost}
+            className="flex flex-1 cursor-pointer flex-col items-center gap-1 rounded-md py-1 text-[11px] font-medium text-neutral-500 transition-colors hover:bg-neutral-50 hover:text-neutral-900"
+          >
+            {repostIcon ?? <Repeat size={14} />}
+            Repost
+          </button>
+
+          <button
+            type="button"
+            aria-label={`Send post from ${username}`}
+            onClick={onSend}
+            className="flex flex-1 cursor-pointer flex-col items-center gap-1 rounded-md py-1 text-[11px] font-medium text-neutral-500 transition-colors hover:bg-neutral-50 hover:text-neutral-900"
+          >
+            {sendIcon ?? <Share2 size={14} />}
+            Send
+          </button>
+        </div>
+      </div>
+    );
+  },
+);
+
+LinkedInPostCard.displayName = "LinkedInPostCard";

package/components/socials/linked-in-profile-card.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+export type LinkedInProfileCardProps = Readonly<
+  {
+    name?: string;
+    headline?: string;
+    location?: string;
+    connections?: string | number;
+    bio?: string;
+    posts?: string | number;
+    experience?: string;
+    coverImage?: string;
+    avatar?: string;
+    coverImageAlt?: string;
+    avatarAlt?: string;
+    connectLabel?: string;
+    messageLabel?: string;
+    connectButton?: ReactNode;
+    messageButton?: ReactNode;
+    onConnect?: () => void;
+    onMessage?: () => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Linked In Profile component — styled with Tailwind CSS.
+export const LinkedInProfileCard = forwardRef<
+  HTMLDivElement,
+  LinkedInProfileCardProps
+>(
+  (
+    {
+      className,
+      name = "Alex Morgan",
+      headline = "Software Developer at Motion UI",
+      location = "West Bengal, India",
+      connections = "500+",
+      bio = "Passionate about open-source, minimal UI, and developer tools.",
+      posts = 42,
+      experience = "2.5yr",
+      coverImage = "/background5.webp",
+      avatar = "/profile-picture.png",
+      coverImageAlt = "LinkedIn cover image",
+      avatarAlt = "Profile avatar",
+      connectLabel = "Connect",
+      messageLabel = "Message",
+      connectButton,
+      messageButton,
+      onConnect,
+      onMessage,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="linkedin-profile-card"
+        className={cn(
+          "w-72 overflow-hidden rounded-xl border border-neutral-100 bg-white font-sans shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        {/* Cover */}
+        <div className="relative h-20">
+          <Image
+            src={coverImage}
+            alt={coverImageAlt}
+            fill
+            className="object-cover"
+            sizes="288px"
+          />
+
+          {/* Avatar */}
+          <div className="absolute -bottom-8 left-4 flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-neutral-800 shadow">
+            <Image
+              src={avatar}
+              alt={avatarAlt}
+              width={28}
+              height={28}
+              className="w-7"
+              sizes="28px"
+            />
+          </div>
+        </div>
+
+        <div className="px-4 pt-10 pb-4">
+          {/* Name */}
+          <h4 title={name} className="mt-2 font-bold text-neutral-900">
+            {name}
+          </h4>
+
+          {/* Headline */}
+          <p title={headline} className="text-xs text-neutral-600">
+            {headline}
+          </p>
+
+          {/* Location + connections */}
+          <p className="mt-0.5 text-xs text-neutral-400">
+            {location} · {connections} connections
+          </p>
+
+          {/* Bio */}
+          <p
+            title={bio}
+            className="mt-2 text-xs leading-relaxed text-neutral-600"
+          >
+            {bio}
+          </p>
+
+          <div className="mt-3 flex gap-2">
+            {connectButton ?? (
+              <button
+                type="button"
+                aria-label={`Connect with ${name}`}
+                onClick={onConnect}
+                className="flex-1 cursor-pointer rounded-full bg-neutral-800 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-black"
+              >
+                {connectLabel}
+              </button>
+            )}
+
+            {messageButton ?? (
+              <button
+                type="button"
+                aria-label={`Message ${name}`}
+                onClick={onMessage}
+                className="flex-1 cursor-pointer rounded-full border border-neutral-200 py-1.5 text-xs font-medium text-neutral-600 transition-colors hover:bg-neutral-50"
+              >
+                {messageLabel}
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Stats */}
+        <div className="flex justify-around border-t border-neutral-100 px-4 py-3 text-center">
+          <div>
+            <p className="text-sm font-bold text-neutral-900">{posts}</p>
+            <p className="text-[10px] tracking-wide text-neutral-400 uppercase">
+              Posts
+            </p>
+          </div>
+
+          <div>
+            <p className="text-sm font-bold text-neutral-900">{connections}</p>
+            <p className="text-[10px] tracking-wide text-neutral-400 uppercase">
+              Connections
+            </p>
+          </div>
+
+          <div>
+            <p className="text-sm font-bold text-neutral-900">{experience}</p>
+            <p className="text-[10px] tracking-wide text-neutral-400 uppercase">
+              Experience
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+LinkedInProfileCard.displayName = "LinkedInProfileCard";