Skip to content

Commit

Permalink
Merge pull request #1603 from milvus-io/preview
Browse files Browse the repository at this point in the history
Preview
  • Loading branch information
ThyeeZz authored Sep 9, 2024
2 parents 3e06660 + 431e75a commit 70359a0
Show file tree
Hide file tree
Showing 10 changed files with 574 additions and 287 deletions.
4 changes: 4 additions & 0 deletions src/components/card/BlogCard.module.less
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@
color: #000;
height: 78px;

&:hover {
text-decoration: underline;
}

@media @tablet, @phone {
height: 72px;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -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}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/cookieConsent/index.module.less
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
}

p {
.paragraph5-regular();
.paragraph6-regular();
color: @color-black2;
font-family: Inter !important;
}
Expand Down
147 changes: 147 additions & 0 deletions src/components/ui/pagination.tsx
Original file line number Diff line number Diff line change
@@ -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,
};
Loading

0 comments on commit 70359a0

Please sign in to comment.