Merge pull request #1603 from milvus-io/preview

Preview

src/components/card/BlogCard.module.less

@@ -24,6 +24,10 @@
       color: #000;
       height: 78px;
 
+      &:hover {
+        text-decoration: underline;
+      }
+
       @media @tablet, @phone {
         height: 72px;
       }

src/components/card/BlogCard.jsx → src/components/card/BlogCard.tsx

@@ -1,10 +1,18 @@
 import React from 'react';
 import Link from 'next/link';
-import * as styles from './BlogCard.module.less';
+import styles from './BlogCard.module.less';
 import Tags from '../tags';
 import clsx from 'clsx';
 
-const BlogCard = ({ title, desc, tags, cover, locale, path, className }) => {
+const BlogCard = (props: {
+  title: string;
+  desc: string;
+  tags: string[];
+  cover: string;
+  path: string;
+  className?: string;
+}) => {
+  const { title, desc, tags, cover, path, className } = props;
   const to = `/blog/${path}`;
 
   return (
@@ -14,7 +22,7 @@ const BlogCard = ({ title, desc, tags, cover, locale, path, className }) => {
         [className]: className,
       })}
     >
-      <div className="w-full aspect-[1.59817/1] overflow-hidden rounded-[6px] mb-[28px]">
+      <div className="w-full aspect-[1.59817/1] overflow-hidden rounded-[12px] mb-[28px]">
         <img className={styles.cover} src={cover} alt={title} />
       </div>
       <div className={styles.descWrapper}>

src/components/cookieConsent/index.module.less

@@ -31,7 +31,7 @@
   }
 
   p {
-    .paragraph5-regular();
+    .paragraph6-regular();
     color: @color-black2;
     font-family: Inter !important;
   }

src/components/ui/pagination.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+
+import { cn } from '@/utils/merge';
+import { ButtonProps, buttonVariants } from '@/components/ui/button';
+import Link from 'next/link';
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn('mx-auto flex w-full justify-center', className)}
+    {...props}
+  />
+);
+Pagination.displayName = 'Pagination';
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn('flex flex-row items-center gap-1', className)}
+    {...props}
+  />
+));
+PaginationContent.displayName = 'PaginationContent';
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn('', className)} {...props} />
+));
+PaginationItem.displayName = 'PaginationItem';
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+  disabled?: boolean;
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<typeof Link>;
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) => (
+  <Link
+    aria-current={isActive ? 'page' : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'ghost',
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = 'PaginationLink';
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => {
+  return (
+    <>
+      {props.disabled ? (
+        <button
+          className={cn(
+            'w-[32px] h-[32px] p-0 m-0 flex items-center justify-center',
+            className
+          )}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </button>
+      ) : (
+        <PaginationLink
+          aria-label="Go to previous page"
+          size="default"
+          className={cn('gap-1 pl-2.5', className)}
+          {...props}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </PaginationLink>
+      )}
+    </>
+  );
+};
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => {
+  return (
+    <>
+      {props.disabled ? (
+        <button
+          className={cn(
+            'w-[32px] h-[32px] p-0 m-0 flex items-center justify-center',
+            className
+          )}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </button>
+      ) : (
+        <PaginationLink
+          aria-label="Go to next page"
+          size="default"
+          className={cn('gap-1 pr-2.5', className)}
+          {...props}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </PaginationLink>
+      )}
+    </>
+  );
+};
+PaginationNext.displayName = 'PaginationNext';
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    aria-hidden
+    className={cn('flex h-9 w-9 items-end p-[6px] justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};