Skip to content

Commit

Permalink
docs(nx-dev): add MinIO icon & adjust powerpack features layout
Browse files Browse the repository at this point in the history 
Integrate a new MinIO icon into the UI icons library and powerpack features. Adjust the layout and styling of the Nx Powerpack features to improve flexibility and responsiveness.
  • Loading branch information
@bcabanes
bcabanes committed Nov 15, 2024
1 parent 907e58f commit 84b82e5
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 40 deletions.
1 change: 1 addition & 0 deletions nx-dev/ui-icons/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ export * from './lib/editors/visual-studio-code';
export * from './lib/monorepo-world';
export * from './lib/others/amazon-s3';
export * from './lib/others/linux';
export * from './lib/others/min-io';
export * from './lib/others/windows';

// PODCASTS
Expand Down
17 changes: 17 additions & 0 deletions nx-dev/ui-icons/src/lib/others/min-io.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { FC, SVGProps } from 'react';

/**
* Use `#C72E49` for a colored version.
*/
export const MinIOIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
{...props}
>
<title>MinIO</title>
<path d="M13.2072.006c-.6216-.0478-1.2.1943-1.6211.582a2.15 2.15 0 0 0-.0938 3.0352l3.4082 3.5507a3.042 3.042 0 0 1-.664 4.6875l-.463.2383V7.2853a15.4198 15.4198 0 0 0-8.0174 10.4862v.0176l6.5487-3.3281v7.621L13.7794 24V13.6817l.8965-.4629a4.4432 4.4432 0 0 0 1.2207-7.0292l-3.371-3.5254a.7489.7489 0 0 1 .037-1.0547.7522.7522 0 0 1 1.0567.0371l.4668.4863-.006.0059 4.0704 4.2441a.0566.0566 0 0 0 .082 0 .06.06 0 0 0 0-.0703l-3.1406-5.1425-.1484.1425.1484-.1445C14.4945.3926 13.8287.0538 13.2072.006Zm-.9024 9.8652v2.9941l-4.1523 2.1484a13.9787 13.9787 0 0 1 2.7676-3.9277 14.1784 14.1784 0 0 1 1.3847-1.2148z" />
</svg>
);
106 changes: 66 additions & 40 deletions nx-dev/ui-powerpack/src/lib/powerpack-features.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
AmazonS3Icon,
AzureDevOpsIcon,
GoogleCloudIcon,
MinIOIcon,
NxIcon,
} from '@nx/nx-dev/ui-icons';
import Link from 'next/link';
Expand Down Expand Up @@ -65,7 +66,7 @@ export function PowerpackFeatures(): ReactElement {
</ButtonLink>
</div>
</div>
<div className="hidden w-full lg:block">
<div className="hidden w-full xl:block">
<CustomRemoteCacheAnimation />
</div>
</div>
Expand Down Expand Up @@ -268,7 +269,7 @@ const Card = forwardRef<
<div
ref={ref}
className={cx(
'z-10 flex flex-col items-center justify-between rounded-lg border border-slate-200 bg-white p-2 py-3 shadow-sm dark:border-white/10 dark:bg-slate-950',
'z-10 flex items-center gap-2 rounded-md border border-slate-200 bg-white p-2 py-2 shadow-sm dark:border-white/10 dark:bg-slate-950',
className
)}
onMouseEnter={onMouseEnter}
Expand All @@ -286,6 +287,7 @@ export function CustomRemoteCacheAnimation(): ReactElement {
const azureRef = useRef<HTMLDivElement>(null);
const containerRef = useRef<HTMLDivElement>(null);
const gcpRef = useRef<HTMLDivElement>(null);
const minioRef = useRef<HTMLDivElement>(null);
const networkDriveRef = useRef<HTMLDivElement>(null);
const nxRef = useRef<HTMLDivElement>(null);

Expand All @@ -295,9 +297,9 @@ export function CustomRemoteCacheAnimation(): ReactElement {
containerRef={containerRef}
fromRef={awsRef}
toRef={nxRef}
curvature={175}
startXOffset={-20}
endYOffset={30}
curvature={-75}
startXOffset={-75}
endYOffset={0}
bidirectional={true}
duration={5}
/>
Expand All @@ -307,9 +309,9 @@ export function CustomRemoteCacheAnimation(): ReactElement {
containerRef={containerRef}
fromRef={azureRef}
toRef={nxRef}
curvature={175}
startXOffset={20}
endYOffset={30}
curvature={75}
startXOffset={-75}
endYOffset={0}
bidirectional={true}
reverse={true}
duration={5}
Expand All @@ -321,21 +323,33 @@ export function CustomRemoteCacheAnimation(): ReactElement {
fromRef={gcpRef}
toRef={nxRef}
bidirectional={true}
curvature={130}
startXOffset={20}
endXOffset={-20}
curvature={75}
startXOffset={-75}
endYOffset={0}
reverse={true}
duration={5}
/>
),
minio: (
<AnimatedCurvedBeam
containerRef={containerRef}
fromRef={minioRef}
toRef={nxRef}
curvature={-75}
startXOffset={-75}
endYOffset={0}
bidirectional={true}
duration={5}
/>
),
networkDrive: (
<AnimatedCurvedBeam
containerRef={containerRef}
fromRef={networkDriveRef}
toRef={nxRef}
curvature={150}
startXOffset={-20}
endXOffset={20}
curvature={10}
startXOffset={-75}
endXOffset={0}
bidirectional={true}
duration={5}
/>
Expand Down Expand Up @@ -370,7 +384,7 @@ export function CustomRemoteCacheAnimation(): ReactElement {

return (
<div className="relative flex h-full w-full" ref={containerRef}>
<div className="flex w-full flex-col items-center justify-center gap-24">
<div className="grid w-full grid-cols-2 items-center justify-center gap-24">
<div className="flex w-full justify-center">
<Card
ref={nxRef}
Expand All @@ -386,7 +400,7 @@ export function CustomRemoteCacheAnimation(): ReactElement {
/>
</Card>
</div>
<div className="grid w-full grid-cols-4 items-stretch gap-4">
<div className="flex w-full flex-col items-stretch gap-4">
<Card
ref={awsRef}
onMouseEnter={() => {
Expand All @@ -402,18 +416,39 @@ export function CustomRemoteCacheAnimation(): ReactElement {
{ 'bg-slate-50 dark:bg-slate-800': selected === 'aws' }
)}
>
<div className="text-center text-xs text-slate-900 dark:text-white">
<AmazonS3Icon aria-hidden="true" className="size-4" />
<Link
href="/nx-api/powerpack-s3-cache"
title="Learn how to configure Amazon S3 caching"
className="text-center text-xs text-slate-900 dark:text-white"
>
<span className="absolute inset-0" />
Amazon S3
</div>
<AmazonS3Icon aria-hidden="true" className="mt-1 size-6" />

</Link>
</Card>
<Card
ref={minioRef}
onMouseEnter={() => {
setAutoplay(false);
setSelected('minio');
}}
onMouseLeave={() => {
setAutoplay(true);
setSelected(null);
}}
className={cx(
'relative transition hover:bg-slate-50 dark:hover:bg-slate-800',
{ 'bg-slate-50 dark:bg-slate-800': selected === 'minio' }
)}
>
<MinIOIcon aria-hidden="true" className="size-4" />
<Link
href="/nx-api/powerpack-s3-cache"
title="Learn how to configure Amazon S3 caching"
className="mt-4 text-xs"
className="text-center text-xs text-slate-900 dark:text-white"
>
<span className="absolute inset-0" />
Get started
MinIO
</Link>
</Card>
<Card
Expand All @@ -431,18 +466,15 @@ export function CustomRemoteCacheAnimation(): ReactElement {
{ 'bg-slate-50 dark:bg-slate-800': selected === 'networkDrive' }
)}
>
<div className="text-center text-xs text-slate-900 dark:text-white">
Network Drive
</div>
<ServerIcon aria-hidden="true" className="mt-1 size-6" />
<ServerIcon aria-hidden="true" className="size-4" />

<Link
href="/nx-api/powerpack-shared-fs-cache"
title="Learn how to configure network drive caching"
className="mt-4 text-xs"
className="text-center text-xs text-slate-900 dark:text-white"
>
<span className="absolute inset-0" />
Get started
Network Drive
</Link>
</Card>
<Card
Expand All @@ -460,18 +492,15 @@ export function CustomRemoteCacheAnimation(): ReactElement {
{ 'bg-slate-50 dark:bg-slate-800': selected === 'gcp' }
)}
>
<div className="text-center text-xs text-slate-900 dark:text-white">
GCP
</div>
<GoogleCloudIcon aria-hidden="true" className="mt-1 size-6" />
<GoogleCloudIcon aria-hidden="true" className="size-4" />

<Link
href="/nx-api/powerpack-gcs-cache"
title="Learn how to configure Google Storage caching"
className="mt-4 text-xs"
className="text-center text-xs text-slate-900 dark:text-white"
>
<span className="absolute inset-0" />
Get started
GCP
</Link>
</Card>
<Card
Expand All @@ -489,18 +518,15 @@ export function CustomRemoteCacheAnimation(): ReactElement {
{ 'bg-slate-50 dark:bg-slate-800': selected === 'azure' }
)}
>
<div className="text-center text-xs text-slate-900 dark:text-white">
Azure
</div>
<AzureDevOpsIcon aria-hidden="true" className="mt-1 size-6" />
<AzureDevOpsIcon aria-hidden="true" className="size-4" />

<Link
href="/nx-api/powerpack-azure-cache"
title="Learn how to configure Azure Blob Storage caching"
className="mt-4 text-xs"
className="text-center text-xs text-slate-900 dark:text-white"
>
<span className="absolute inset-0" />
Get started
Azure
</Link>
</Card>
</div>
Expand Down

0 comments on commit 84b82e5

Please sign in to comment.