Beautifully designed, production-ready.

import { ArrowRightIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { ArticleItem } from "@/components/article-item"

export function Blog01() {
  return (
    <div className="container mx-auto flex flex-col gap-8 px-4 py-8">
      <h2 className="ml-4 font-heading text-4xl leading-snug font-medium tracking-tight md:text-5xl">
        Blog
      </h2>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {articles.map((article) => (
          <a key={article.id} className="block h-full" href="#">
            <ArticleItem
              title={article.title}
              coverUrl={article.coverUrl}
              createdAt={article.createdAt}
            />
          </a>
        ))}
      </div>

      <div className="flex justify-center">
        <Button className="gap-2 pr-2.5 pl-3" asChild>
          <a href="#">
            View All
            <ArrowRightIcon />
          </a>
        </Button>
      </div>
    </div>
  )
}

type Article = {
  id: string
  title: string
  coverUrl: string
  createdAt: string
}

const articles: Article[] = [
  {
    id: "1",
    title:
      "Apple unveils iPhone 17 Pro: Aluminum frame returns, new colors, upgraded camera",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/1.webp",
    createdAt: "2025-09-13",
  },
  {
    id: "2",
    title:
      'While the world is expecting AGI, François Chollet is showing just how "naive" AI can be',
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/2.webp",
    createdAt: "2025-04-21",
  },
  {
    id: "3",
    title:
      "Apple introduces iPhone 16e: A powerful new model for the iPhone 16 lineup",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/3.webp",
    createdAt: "2025-02-20",
  },
  {
    id: "4",
    title:
      "Apple unveils MacBook Pro M4: Same design, base model now with 16GB RAM, priced from $1,599",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/4.webp",
    createdAt: "2024-10-31",
  },
  {
    id: "5",
    title:
      "Apple unveils new Mac mini M4: Smaller, 16GB RAM on the base model, priced from $599",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/5.webp",
    createdAt: "2024-10-31",
  },
  {
    id: "6",
    title:
      "Apple unveils iMac M4: Unchanged design, more powerful M4 chip, RAM starts at 16GB, priced from $1,299",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/6.webp",
    createdAt: "2024-10-29",
  },
]

import { ArrowRightIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { ArticleItem } from "@/components/article-item"

export function Blog02() {
  return (
    <div className="max-w-screen overflow-x-hidden">
      <div className="container mx-auto px-4 py-8">
        <div className="border-x border-line">
          <h2 className="screen-line-top screen-line-bottom ml-4 font-heading text-3xl font-semibold tracking-tight">
            Blog
          </h2>

          <p className="p-4 text-base text-balance text-muted-foreground">
            A collection of articles on development, design, ideas, and tech
            news.
          </p>

          <div className="screen-line-top relative py-4">
            <div className="pointer-events-none absolute inset-0 -z-1 grid grid-cols-1 gap-4 max-sm:hidden sm:grid-cols-2 md:grid-cols-3">
              <div className="border-r border-line" />
              <div className="border-l border-line md:border-x" />
              <div className="border-l border-line max-md:hidden" />
            </div>

            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
              {articles.map((article) => (
                <ArticleItem
                  key={article.id}
                  url="#"
                  title={article.title}
                  coverUrl={article.coverUrl}
                  createdAt={article.createdAt}
                />
              ))}
            </div>
          </div>

          <div className="screen-line-top screen-line-bottom flex justify-center py-2">
            <Button className="gap-2 pr-2.5 pl-3" asChild>
              <a href="#">
                View All
                <ArrowRightIcon />
              </a>
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}

type Article = {
  id: string
  title: string
  coverUrl: string
  createdAt: string
}

const articles: Article[] = [
  {
    id: "1",
    title:
      "Apple unveils iPhone 17 Pro: Aluminum frame returns, new colors, upgraded camera",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/1.webp",
    createdAt: "2025-09-13",
  },
  {
    id: "2",
    title:
      'While the world is expecting AGI, François Chollet is showing just how "naive" AI can be',
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/2.webp",
    createdAt: "2025-04-21",
  },
  {
    id: "3",
    title:
      "Apple introduces iPhone 16e: A powerful new model for the iPhone 16 lineup",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/3.webp",
    createdAt: "2025-02-20",
  },
  {
    id: "4",
    title:
      "Apple unveils MacBook Pro M4: Same design, base model now with 16GB RAM, priced from $1,599",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/4.webp",
    createdAt: "2024-10-31",
  },
  {
    id: "5",
    title:
      "Apple unveils new Mac mini M4: Smaller, 16GB RAM on the base model, priced from $599",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/5.webp",
    createdAt: "2024-10-31",
  },
  {
    id: "6",
    title:
      "Apple unveils iMac M4: Unchanged design, more powerful M4 chip, RAM starts at 16GB, priced from $1,299",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/6.webp",
    createdAt: "2024-10-29",
  },
]

import { CodeXmlIcon, LightbulbIcon } from "lucide-react"

import type { ExperienceItemType } from "@/components/work-experience"
import { WorkExperience } from "@/components/work-experience"

export function Experience01() {
  return (
    <div className="max-w-screen overflow-x-hidden">
      <div className="container mx-auto px-4 py-8">
        <div className="border-x border-line">
          <h2 className="screen-line-top screen-line-bottom ml-4 font-heading text-3xl font-semibold tracking-tight">
            Experience
          </h2>

          <WorkExperience
            className="bg-transparent *:screen-line-bottom"
            experiences={EXPERIENCE}
          />
        </div>
      </div>
    </div>
  )
}

const EXPERIENCE: ExperienceItemType[] = [
  {
    id: "shadcncraft",
    companyName: "shadcncraft",
    companyLogo: "https://assets.chanhdai.com/images/companies/shadcncraft.svg",
    companyWebsite: "https://shadcncraft.com",
    positions: [
      {
        id: "1",
        title: "Design Engineer",
        employmentPeriod: {
          start: "01.2026",
        },
        employmentType: "Full-time",
        icon: <CodeXmlIcon />,
        description:
          "- Work on the registry and React component library.\n- Design and build Pro application components and blocks, from Figma to production-ready React.",
        skills: [
          "TypeScript",
          "Next.js",
          "Tailwind CSS",
          "shadcn/registry",
          "Figma",
        ],
        isExpanded: true,
      },
    ],
    isCurrentEmployer: true,
  },
  {
    id: "quaric",
    companyName: "Quaric",
    companyLogo: "https://assets.chanhdai.com/images/companies/quaric.svg",
    companyWebsite: "https://quaric.com",
    positions: [
      {
        id: "2",
        title: "Design Engineer",
        employmentPeriod: {
          start: "03.2024",
        },
        employmentType: "Part-time",
        icon: <CodeXmlIcon />,
        description: `- Integrated VNPAY-QR for secure transactions.
- Registered the e-commerce site with [online.gov.vn](https://online.gov.vn) for compliance.
- Developed online ordering to streamline purchases.
- Build and maintain ZaDark.com with Docusaurus, integrating AdSense.
- Develop and maintain the ZaDark extension for Zalo Web on Chrome, Safari, Edge, and Firefox — with 15,000+ active users via Chrome Web Store.`,
        skills: [
          "Next.js",
          "Strapi",
          "Auth0",
          "VNPAY-QR",
          "Docker",
          "NGINX",
          "Google Cloud",
          "Docusaurus",
          "Extension",
          "Research",
          "Project Management",
        ],
      },
      {
        id: "1",
        title: "Founder",
        employmentPeriod: {
          start: "03.2024",
        },
        employmentType: "Part-time",
        icon: <LightbulbIcon />,
        skills: ["Business Ownership", "Business Law", "Business Tax"],
      },
    ],
    isCurrentEmployer: true,
  },
]

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

export function Team01() {
  return (
    <div className="container px-4 py-8">
      <GlowCardGrid className="lg:grid-cols-4">
        {CARDS.map((card) => (
          <GlowCard
            key={card.name}
            name={card.name}
            handle={card.handle}
            avatar={card.avatar}
          />
        ))}
      </GlowCardGrid>
    </div>
  )
}

const CARDS = [
  {
    name: "shadcn",
    handle: "@shadcn",
    avatar: "https://unavatar.io/x/shadcn",
  },
  {
    name: "Evil Rabbit",
    handle: "@evilrabbit_",
    avatar: "https://unavatar.io/x/evilrabbit_",
  },
  {
    name: "OrcDev",
    handle: "@orcdev",
    avatar: "https://unavatar.io/x/orcdev",
  },
  {
    name: "David Haz",
    handle: "@davidhdev",
    avatar: "https://unavatar.io/x/davidhdev",
  },
  {
    name: "Shu",
    handle: "@shuding",
    avatar: "https://unavatar.io/x/shuding",
  },
  {
    name: "Emil Kowalski",
    handle: "@emilkowalski",
    avatar: "https://unavatar.io/x/emilkowalski",
  },
  {
    name: "Aaron",
    handle: "@aaronmahlke",
    avatar: "https://unavatar.io/x/aaronmahlke",
  },
  {
    name: "Paranjay Khachar",
    handle: "@Paranjayy",
    avatar: "https://unavatar.io/github/Paranjayy",
  },
]

import { GitHubContributions } from "@/components/github-contributions"
import { Activity } from "@/components/contribution-graph"

export function GitHubContributions01() {
  const contributions = Promise.resolve(MOCK_CONTRIBUTIONS)

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="rounded-xl border border-line bg-background p-6">
        <GitHubContributions
          contributions={contributions}
          githubProfileUrl="https://github.com/Paranjayy"
        />
      </div>
    </div>
  )
}

const MOCK_CONTRIBUTIONS: Activity[] = Array.from({ length: 365 }, (_, i) => {
  const date = new Date()
  date.setDate(date.getDate() - (364 - i))
  return {
    date: date.toISOString().split("T")[0],
    count: Math.floor(Math.random() * 10),
    level: Math.floor(Math.random() * 5),
  }
})

import { WakaTimeStats } from "@/components/wakatime-stats/wakatime-stats"

export function Wakatime01() {
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="rounded-xl border border-line bg-background p-6">
        <div className="mb-6 flex items-center justify-between">
          <div>
            <h3 className="text-lg font-bold tracking-tight text-foreground">
              Coding Activity
            </h3>
            <p className="text-sm text-muted-foreground">
              Across all platforms this week
            </p>
          </div>
          <div className="text-right">
            <span className="font-mono text-2xl font-bold text-foreground">
              42h 15m
            </span>
          </div>
        </div>
        
        <WakaTimeStats data={MOCK_WAKATIME} />
      </div>
    </div>
  )
}

const MOCK_WAKATIME = [
  { name: "TypeScript", percent: 45, color: "#3178c6" },
  { name: "React", percent: 25, color: "#61dafb" },
  { name: "Next.js", percent: 15, color: "#000000" },
  { name: "Tailwind CSS", percent: 10, color: "#38bdf8" },
  { name: "Other", percent: 5, color: "#cccccc" },
]