Merge pull request #544 from Gmin2/common-types

Added types for common folder
vitessio · Jun 11, 2024 · 624134d · 624134d
2 parents c762ce0 + a115b0b
commit 624134d
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 7 deletions.
diff --git a/website/src/common/DisplayList.tsx b/website/src/common/DisplayList.tsx
@@ -15,7 +15,23 @@ limitations under the License.
 */
 import React from "react";
 
-export default function DisplayList(props) {
+interface DataItem {
+  [key: string]: string;
+}
+
+interface DisplayListProps {
+  data: DataItem[];
+}
+
+/**
+ * Component to display a list of data items in a table or grid layout
+ * depending on the screen size.
+ *
+ * @param {DisplayListProps} props - The component props containing the data to be displayed.
+ * @returns {JSX.Element} The rendered component.
+ */
+
+const DisplayList: React.FC<DisplayListProps> = (props) => {
   const { data } = props;
 
   return (
@@ -70,3 +86,4 @@ export default function DisplayList(props) {
     </div>
   );
 }
+ export default DisplayList;
diff --git a/website/src/common/Footer.tsx b/website/src/common/Footer.tsx
@@ -20,16 +20,32 @@ import { AiFillGithub, AiFillSlackCircle } from "react-icons/ai";
 import { FaSquareXTwitter } from "react-icons/fa6";
 import { BsStackOverflow } from "react-icons/bs";
 import { Link } from "react-router-dom";
+import { IconType } from "react-icons";
 
-const Footer = () => {
-  const socials = [
+interface Social {
+  url: string;
+  icon: IconType;
+}
+
+interface LinkItem {
+  title: string;
+  to: string;
+}
+
+interface FooterItem {
+  title: string;
+  links: LinkItem[];
+}
+
+const Footer: React.FC = () => {
+  const socials: Social[] = [
     { url: "https://github.com/vitessio/arewefastyet", icon: AiFillGithub },
     { url: "https://vitess.io/slack", icon: AiFillSlackCircle },
     { url: "https://twitter.com/vitessio", icon: FaSquareXTwitter },
     { url: "https://stackoverflow.com/search?q=vitess", icon: BsStackOverflow },
   ];
 
-  const items = [
+  const items: FooterItem[] = [
     {
       title: "Benchmarks",
       links: [

diff --git a/website/src/common/Modal.tsx b/website/src/common/Modal.tsx
@@ -17,7 +17,7 @@ import React from "react";
 import useModal from "../hooks/useModal";
 import { twMerge } from "tailwind-merge";
 
-export default function Modal() {
+export default function Modal(): JSX.Element {
   const modal = useModal();
 
   return (

diff --git a/website/src/common/Navbar.tsx b/website/src/common/Navbar.tsx
@@ -27,7 +27,20 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet";
 
-const navItems = [
+/**
+ * @description Defines the structure of a navigation item.
+ *
+ * @typedef {Object} NavItem
+ * @param {string} to - The URL path for the navigation link.
+ * @param {string} title - The title of the navigation link.
+ */
+
+type NavItem = {  
+  to: string;
+  title: string;
+ }
+
+const navItems: NavItem[] = [
   { to: "/status", title: "Status" },
   { to: "/daily", title: "Daily" },
   { to: "/compare", title: "Compare" },
@@ -37,7 +50,7 @@ const navItems = [
   { to: "/pr", title: "PR" },
 ];
 
-export default function Navbar() {
+export default function Navbar(): JSX.Element {
   return (
     <nav className="flex flex-col relative">
       <div