Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: change style of Latest Changes card #1196

Merged
merged 1 commit into from
Jun 4, 2024
Merged

feat: change style of Latest Changes card #1196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 49 additions & 37 deletions packages/toolkit/src/view/hub/hub-view/LatestChangesCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import cn from "clsx";
import { Icons, Skeleton, buttonVariants } from "@instill-ai/design-system";
import { Icons, Skeleton } from "@instill-ai/design-system";
import { useChangelogs } from "../../../lib";
import * as React from "react";

type Changelog = {
id: string;
Expand Down Expand Up @@ -38,49 +38,61 @@ export const LatestChangesCard = () => {

return (
<div className="flex flex-col rounded-sm border border-semantic-bg-line bg-semantic-bg-primary p-4">
<div className="mb-4 font-bold product-headings-heading-3">
<div className="mb-4 font-bold product-body-text-3-semibold">
Latest Changes
</div>
{changelogs.isSuccess &&
changelogs.data.map((changelog: Changelog) => (
<a
href={`https://instill-ai.productlane.com/changelog/${changelog.id}`}
key={changelog.id}
target="_blank"
rel="noopener noreferrer"
className="mb-4"
>
<div
className={cn(
buttonVariants({ variant: "secondaryColour", size: "md" }),
"pointer-events-none mb-1 w-min whitespace-nowrap rounded-sm px-2 py-2 capitalize"
)}
>
{changelog.date && new Date(changelog.date).getTime() !== 0
? new Date(changelog.date).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})
: new Date(changelog.updatedAt).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})}
</div>
<p className="text-semantic-fg-primary product-body-text-3-regular hover:underline">
{changelog.title}
</p>
</a>
))}

{changelogs.isSuccess && (
<div className="mb-2 grid grid-cols-[auto_1fr] ">
{changelogs.data.map((changelog: Changelog, index: number) => (
<React.Fragment key={changelog.id}>
<div className="relative flex items-start justify-center ">
<div className="inline-flex h-3 w-3 items-center justify-center">
<div className="h-2.5 w-2.5 rounded-full bg-slate-300" />
</div>
{index !== changelogs.data.length && (
<div className="absolute bottom-0 left-1/2 top-3 w-0.5 -translate-x-1/2 rounded-full bg-semantic-node-disconnected-bg" />
)}
</div>
<a
href={`https://instill-ai.productlane.com/changelog/${changelog.id}`}
target="_blank"
rel="noopener noreferrer"
className="ml-2 pb-4"
>
<div className="-mt-0.5 mb-1 w-min whitespace-nowrap text-xs font-semibold capitalize text-semantic-accent-default">
{changelog.date && new Date(changelog.date).getTime() !== 0
? new Date(changelog.date).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})
: new Date(changelog.updatedAt).toLocaleDateString(
"en-US",
{
year: "numeric",
month: "long",
day: "numeric",
}
)}
</div>
<p className="text-semantic-fg-primary product-body-text-3-regular hover:underline">
{changelog.title}
</p>
</a>
</React.Fragment>
))}
</div>
)}

<a
href="https://instill-ai.productlane.com/changelog"
target="_blank"
rel="noopener noreferrer"
>
<div className="my-auto ml-2 mt-4 flex justify-start text-semantic-accent-default product-button-button-2 hover:!underline">
<div className="my-auto ml-2 flex items-center gap-2 text-semantic-accent-default product-button-button-3 hover:!underline">
View changelog
<Icons.ChevronRight className="my-auto h-4 w-4 stroke-semantic-accent-default" />
<Icons.ChevronRight className="h-4 w-4 stroke-semantic-accent-default" />
</div>
</a>
</div>
Expand Down
8 changes: 4 additions & 4 deletions packages/toolkit/src/view/hub/hub-view/NewsLetterCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
);
};

const preloadAdjacentImages = () => {

Check warning on line 49 in packages/toolkit/src/view/hub/hub-view/NewsLetterCard.tsx

View workflow job for this annotation

GitHub Actions / unit-test 

The 'preloadAdjacentImages' function makes the dependencies of useEffect Hook (at line 65) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'preloadAdjacentImages' in its own useCallback() Hook

Check warning on line 49 in packages/toolkit/src/view/hub/hub-view/NewsLetterCard.tsx

View workflow job for this annotation

GitHub Actions / unit-test 

The 'preloadAdjacentImages' function makes the dependencies of useEffect Hook (at line 65) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'preloadAdjacentImages' in its own useCallback() Hook
const prevIndex = currentIndex === 0 ? 0 : currentIndex - 1;
const nextIndex =
currentIndex === blogPosts.length - 1 ? currentIndex : currentIndex + 1;
Expand Down Expand Up @@ -80,7 +80,7 @@
<h2 className="mb-4 font-bold product-headings-heading-3">
What&apos;s New?
</h2>
<div className="relative mb-1 w-full">
<div className="relative mb-2 w-full">
<a
href={`https://www.instill.tech/blog/${slug}`}
target="_blank"
Expand All @@ -94,14 +94,14 @@
fallbackImg={
<Icons.Box className="h-8 w-8 stroke-semantic-fg-primary" />
}
className="h-[140px] w-[248px] object-cover"
className="h-[140px] w-[248px] rounded object-cover"
/>
</a>
</div>
<div
className={cn(
buttonVariants({ variant: "secondaryColour", size: "md" }),
"pointer-events-none mb-2 w-min whitespace-nowrap rounded-sm px-2 py-2 capitalize"
buttonVariants({ variant: "tertiaryColour", size: "sm" }),
"pointer-events-none mb-2 w-min whitespace-nowrap rounded-sm !px-0 py-2 capitalize"
)}
>
{publishedOn}
Expand Down
Loading