Blog

import Link from 'next/link';
import { cva } from 'class-variance-authority';
import Heading from '@/components/ui/Heading';
import { Card, CardBody } from '@/components/ui/Card';
import { Tabs, TabsList, TabsItem, TabsContent } from '@/components/ui/Tabs';
import Image from '@/components/ui/Image';

const content = cva('grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4');

const blogList: BlogItem[] = [
  {
    cover: 'https://dub.sh/IS79VLo',
    id: 'blog-01',
    title: 'The Impact of Social Media on Modern Society',
    url: '#',
    description:
      'Social media has become an integral part of modern society, influencing everything from our daily lives to our professional careers.',
  },
  {
    cover: 'https://dub.sh/lnWJ8i6',
    id: 'blog-02',
    title: 'The Future of Work: Automation and the Rise of the Robot',
    url: '#',
    description: 'The future of work is set to be disrupted by the rise of automation and the development of robots.',
  },
  {
    cover: 'https://dub.sh/MJ71KSd',
    id: 'blog-03',
    title: 'The Rise of the Internet of Things (IoT)',
    url: '#',
    description: 'The Internet of Things (IoT) is expected to transform our lives in the coming years.',
  },
  {
    cover: 'https://dub.sh/clF0Gec',
    id: 'blog-04',
    title: 'The Future of Work: Automation and the Rise of the Robot',
    url: '#',
    description: 'The future of work is set to be disrupted by the rise of automation and the development of robots.',
  },
  {
    cover: 'https://dub.sh/clF0Gec',
    id: 'blog-05',
    title: 'The Future of Work: Automation and the Rise of the Robot',
    url: '#',
    description: 'The future of work is set to be disrupted by the rise of automation and the development of robots.',
  },
  {
    cover: 'https://dub.sh/N1P7oNG',
    id: 'blog-06',
    title: 'Building Your Professional Profile: A Guide to Success',
    url: '#',
    description: 'Building a professional profile is essential for anyone looking to advance in their career.',
  },
  {
    cover: 'https://dub.sh/lnWJ8i6',
    id: 'blog-07',
    title: 'The Art of Mediterranean Cuisine',
    url: '#',
    description: 'Mediterranean cuisine is a delicious and innovative way to prepare delicious meals.',
  },
  {
    cover: 'https://dub.sh/0gbR7uT',
    id: 'blog-08',
    title: 'The Benefits of Exercise for Mental Health',
    url: '#',
    description:
      'Exercise is an essential part of any healthy lifestyle, and it can have a positive impact on mental health',
  },
];
export default function Page() {
  return (
    <div className="mx-auto min-h-screen max-w-6xl overflow-auto px-4 py-20 md:py-40">
      <Heading as="h1" className="text-center">
        Nexus-Kit Blogs
      </Heading>
      <Tabs className="mx-auto mt-10 md:w-fit" defaultValue="all">
        <TabsList className="justify-center">
          <TabsItem className="justify-center md:w-20" value="all">
            All
          </TabsItem>
          <TabsItem className="justify-center md:w-20" value="ui">
            UI
          </TabsItem>
          <TabsItem className="justify-center md:w-20" value="ux">
            UX
          </TabsItem>
          <TabsItem className="justify-center md:w-20" value="sass">
            SasS
          </TabsItem>
          <TabsItem className="justify-center md:w-20" value="product">
            Products
          </TabsItem>
          <TabsItem className="justify-center md:w-20" value="social">
            Social
          </TabsItem>
        </TabsList>
        <TabsContent value="all" className={content()}>
          <BlogList blogs={blogList} />
        </TabsContent>
        <TabsContent value="ui" className={content()}>
          <BlogList blogs={blogList} />
        </TabsContent>
        <TabsContent value="ux" className={content()}>
          <BlogList blogs={blogList} />
        </TabsContent>
        <TabsContent value="sass" className={content()}>
          <BlogList blogs={blogList} />
        </TabsContent>
        <TabsContent value="product" className={content()}>
          <BlogList blogs={blogList} />
        </TabsContent>
        <TabsContent value="social" className={content()}>
          <BlogList blogs={blogList} />
        </TabsContent>
      </Tabs>
    </div>
  );
}

interface BlogItem {
  id: string;
  cover: string;
  title: string;
  url: string;
  description: string;
}
function BlogList({ blogs }: { blogs: BlogItem[] }) {
  return (
    <>
      {blogs.map((blog) => (
        <Link key={blog.id} href={blog.url} className="group">
          <Card className="h-90 overflow-hidden shadow-neutral-300 transition-all group-hover:-translate-y-1 group-hover:shadow-lg dark:shadow-neutral-900">
            <CardBody className="h-full p-0">
              <Image src={blog.cover} alt={blog.title} className="h-50" />
              <div className="space-y-3 overflow-hidden p-4">
                <p className="line-clamp-2 font-semibold">{blog.title}</p>
                <div className="text-description line-clamp-3 overflow-hidden text-sm">{blog.description}</div>
              </div>
            </CardBody>
          </Card>
        </Link>
      ))}
    </>
  );
}

import { IconSearch } from '@tabler/icons-react';
import Heading from '@/components/ui/Heading';
import Input from '@/components/ui/Input';
import Select from '@/components/ui/Select';
import Link from 'next/link';
import { Card, CardBody } from '@/components/ui/Card';
import Image from '@/components/ui/Image';
import Tag from '@/components/ui/Tag';
import { Avatar } from '@/components/ui/Avatar';

const blogList: BlogItem[] = [
  {
    cover: 'https://dub.sh/IS79VLo',
    id: 'blog-01',
    title: 'The Impact of Social Media on Modern Society',
    url: '#',
    tags: ['social', 'tech'],
    date: '2023-03-01',
    authorAvatar: 'https://dub.sh/RzNEeT4',
    authorName: 'John Doe',
  },
  {
    cover: 'https://dub.sh/lnWJ8i6',
    id: 'blog-02',
    title: 'The Future of Work: Automation and the Rise of the Robot',
    url: '#',
    tags: ['tech'],
    authorAvatar: 'https://dub.sh/RzNEeT4',
    authorName: 'John Doe',
    date: '2023-03-12',
  },
  {
    cover: 'https://dub.sh/MJ71KSd',
    id: 'blog-03',
    title: 'The Rise of the Internet of Things (IoT)',
    url: '#',
    tags: ['tech', 'media'],
    authorAvatar: 'https://dub.sh/RzNEeT4',
    authorName: 'John Doe',
    date: '2023-4-15',
  },
  {
    cover: 'https://dub.sh/clF0Gec',
    id: 'blog-04',
    title: 'The Future of Work: Automation and the Rise of the Robot',
    url: '#',
    authorAvatar: 'https://dub.sh/RzNEeT4',
    authorName: 'John Doe',
    tags: ['media'],
    date: '2023-5-12',
  },
  {
    cover: 'https://dub.sh/clF0Gec',
    id: 'blog-05',
    title: 'The Future of Work: Automation and the Rise of the Robot',
    url: '#',
    tags: ['tech'],
    authorAvatar: 'https://dub.sh/RzNEeT4',
    authorName: 'John Doe',
    date: '2023-8-02',
  },
  {
    cover: 'https://dub.sh/N1P7oNG',
    id: 'blog-06',
    title: 'Building Your Professional Profile: A Guide to Success',
    url: '#',
    authorAvatar: 'https://dub.sh/RzNEeT4',
    authorName: 'John Doe',
    tags: ['marketing'],
    date: '2023-10-12',
  },
  {
    cover: 'https://dub.sh/lnWJ8i6',
    id: 'blog-07',
    title: 'The Art of Mediterranean Cuisine',
    url: '#',
    authorAvatar: 'https://dub.sh/RzNEeT4',
    authorName: 'John Doe',
    tags: ['food', 'lifestyle'],
    date: '2023-10-22',
  },
  {
    cover: 'https://dub.sh/RzNEeT4',
    id: 'blog-08',
    title: 'The Benefits of Exercise for Mental Health',
    url: '#',
    authorAvatar: 'https://dub.sh/RzNEeT4',
    authorName: 'John Doe',
    tags: ['lifestyle'],
    date: '2025-01-22',
  },
];

export default function Page() {
  return (
    <div className="mx-auto max-w-6xl overflow-auto px-4 py-20 md:py-40">
      <Heading as="h1" className="text-center">
        Our Blog
      </Heading>
      <p className="text-description mx-auto mt-4 text-center text-sm md:max-w-3xl">
        Discover our latest insights on technology, lifestyle, social media and more. Our blog features expert
        perspectives and in-depth analysis to keep you informed and inspired.
      </p>
      <Input prefix={<IconSearch size={20} />} placeholder="Search" className="mx-auto mt-10 md:w-100" />
      <div className="mt-12 flex items-center justify-between">
        <Select
          className="w-30"
          placeholder="Sort By"
          items={[
            { id: 'tag', label: 'tag', value: 'tag' },
            { id: 'z-a', label: 'time', value: 'time' },
          ]}
          size="sm"
        />
        <span>8 result</span>
      </div>
      <div className="mt-6 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
        {blogList.map((blog) => (
          <BlogItem key={blog.id} {...blog} />
        ))}
      </div>
    </div>
  );
}

interface BlogItem {
  id: string;
  title: string;
  tags: string[];
  date: string;
  cover: string;
  url: string;
  authorAvatar: string;
  authorName: string;
}
function BlogItem({ title, tags, authorAvatar, authorName, date, cover, url }: BlogItem) {
  return (
    <Link href={url} className="group">
      <Card className="group-hover:border-primary h-75 transition-colors">
        <CardBody className="flex h-full flex-col">
          <Image src={cover} alt={title} className="h-40 rounded" />
          {tags.length ? (
            <div className="mt-2 space-x-1">
              {tags.map((tag, i) => (
                <Tag key={i} colors="neutral">
                  {tag}
                </Tag>
              ))}
            </div>
          ) : null}
          <div className="mt-3 flex flex-1 flex-col justify-between">
            <p className="line-clamp-2 overflow-hidden pb-3 text-sm font-semibold">{title}</p>
            <div className="text-description flex items-center gap-1 text-xs">
              <Avatar src={authorAvatar} className="size-5 object-cover" />
              <span>{authorName}</span>
              <span>{date}</span>
            </div>
          </div>
        </CardBody>
      </Card>
    </Link>
  );
}