Add new translations and components for cloud images and default imag…

…e card
rocky-linux · Mar 19, 2024 · 6800442 · 6800442
1 parent d22ef09
commit 6800442
Show file tree

Hide file tree

Showing 8 changed files with 707 additions and 9 deletions.
diff --git a/app/[locale]/download/components/CloudImage/Card.tsx b/app/[locale]/download/components/CloudImage/Card.tsx
@@ -0,0 +1,170 @@
+import React from "react";
+import { useTranslations } from "next-intl";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+
+import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
+import { Tabs } from "@/components/ui/tabs";
+import VersionPicker from "./VersionPicker";
+import Link from "next/link";
+import { Url } from "next/dist/shared/lib/router/router";
+
+import { CloudImage, Columns } from "./Table/Columns";
+import { DataTable } from "./Table/DataTable";
+import cloudImages from "@/data/cloud-images.json";
+
+interface DownloadOption {
+  label: string;
+  link: string;
+}
+
+interface Links {
+  name: string;
+  link: string;
+}
+
+interface TooltipText {
+  text: string;
+}
+
+interface VersionItem {
+  versionName: string;
+  versionId: string;
+  currentVersion: string;
+  plannedEol: string;
+  downloadOptions: DownloadOption[];
+  links: Links[];
+}
+
+interface CloudImageCardProps {
+  title: string;
+  titleTooltip: boolean;
+  titleTooltipText?: TooltipText[];
+  titleTooltipButtonLabel: string;
+  titleTooltipButtonLink: Url;
+  versions: VersionItem[];
+}
+
+function getData(): CloudImage[] {
+  return cloudImages;
+}
+
+const CloudImageCard: React.FC<CloudImageCardProps> = ({
+  title,
+  titleTooltip,
+  titleTooltipText,
+  titleTooltipButtonLabel,
+  titleTooltipButtonLink,
+  versions,
+}) => {
+  const data = getData();
+
+  const t = useTranslations("download");
+  const tGlobal = useTranslations("global");
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          {titleTooltip ? (
+            <HoverCard>
+              <div className="flex gap-2 items-center">
+                <h2 className="text-2xl font-display font-bold">{title}</h2>
+                <HoverCardTrigger className="text-muted-foreground">
+                  <QuestionMarkCircledIcon />
+                </HoverCardTrigger>
+              </div>
+              <HoverCardContent>
+                {titleTooltipText?.map((line, index) => (
+                  <p
+                    key={index}
+                    className="font-normal font-sans py-2"
+                  >
+                    {line.text}
+                  </p>
+                ))}
+                <Link href={titleTooltipButtonLink}>
+                  <Button className="mt-2">{titleTooltipButtonLabel}</Button>
+                </Link>
+              </HoverCardContent>
+            </HoverCard>
+          ) : (
+            <div className="flex gap-2 items-center">
+              <h2 className="text-2xl font-display font-bold">{title}</h2>
+            </div>
+          )}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <h3 className="text-lg font-display font-bold">
+          {t("cards.cloudImages.genericCloud")}
+        </h3>
+        <Tabs defaultValue="rocky-9">
+          <VersionPicker versions={versions} />
+        </Tabs>
+        <hr className="my-8" />
+        <div className="mt-8">
+          <h3 className="text-lg font-display font-bold mb-4">
+            {t("cards.cloudImages.cloudProviders.title")}
+          </h3>
+
+          <div className="flex gap-4">
+            <Drawer>
+              <DrawerTrigger>
+                <span
+                  className={buttonVariants({ variant: "default" }) + " mb-6"}
+                >
+                  {t("cards.cloudImages.cloudProviders.aws.name")}
+                </span>
+              </DrawerTrigger>
+              <DrawerContent className="px-10 pb-10 max-w-7xl mx-auto">
+                <DrawerHeader className="flex items-center justify-between">
+                  <p className="font-display font-bold text-xl">
+                    {t("cards.cloudImages.cloudProviders.aws.drawerTitle")}
+                  </p>
+                  <DrawerClose>
+                    <Button variant="outline">{tGlobal("close")}</Button>
+                  </DrawerClose>
+                </DrawerHeader>
+                <DataTable
+                  columns={Columns}
+                  data={data}
+                />
+              </DrawerContent>
+            </Drawer>
+            <Link
+              href="https://console.cloud.google.com/marketplace/browse?filter=partner:Rocky%20Linux"
+              target="_blank"
+            >
+              <Button>
+                {t("cards.cloudImages.cloudProviders.googleCloud")}
+              </Button>
+            </Link>
+            <Link
+              href="https://console.cloud.google.com/marketplace/browse?filter=partner:Rocky%20Linux"
+              target="_blank"
+            >
+              <Button>{t("cards.cloudImages.cloudProviders.azure")}</Button>
+            </Link>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default CloudImageCard;
diff --git a/app/[locale]/download/components/CloudImage/Table/Columns.tsx b/app/[locale]/download/components/CloudImage/Table/Columns.tsx
@@ -0,0 +1,84 @@
+/* eslint-disable react/jsx-no-literals */
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ColumnDef } from "@tanstack/react-table";
+import { ArrowUpDown } from "lucide-react";
+import Link from "next/link";
+
+export type CloudImage = {
+  version: string;
+  region: string;
+  architecture: string;
+  imageid: string;
+  deploylink: string;
+};
+
+export const Columns: ColumnDef<CloudImage>[] = [
+  {
+    accessorKey: "version",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() == "asc")}
+        >
+          Version
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+  },
+  {
+    accessorKey: "region",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() == "asc")}
+        >
+          Region
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+  },
+  {
+    accessorKey: "architecture",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() == "asc")}
+        >
+          Architecture
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+  },
+  {
+    accessorKey: "imageid",
+    header: "Image ID",
+  },
+  {
+    accessorKey: "deploylink",
+    header: "Deploy",
+    cell: ({ cell }) => {
+      return (
+        <Link
+          target="_blank"
+          href={cell.getValue() as string}
+          rel="noopener noreferrer"
+        >
+          <Button
+            variant="default"
+            size="sm"
+          >
+            Deploy
+          </Button>
+        </Link>
+      );
+    },
+  },
+];