empty breakdown

Author: PrasanKumar93

src/app/components/IconButton/index.css

@@ -0,0 +1 @@
+.comp-icon-button {}

src/app/components/IconButton/index.tsx

@@ -0,0 +1,15 @@
+import './index.css';
+
+interface IconButtonProps {
+    btnLabel: string;
+    onClick?: () => void;
+    iconClass?: string;
+    btnClass?: string; //for primary, secondary, etc. color buttons
+
+}
+
+const IconButton = ({ iconClass, btnLabel, onClick, btnClass }: IconButtonProps) => {
+    return <div className={`comp-icon-button ${iconClass} ${btnClass}`} onClick={onClick}>{btnLabel}</div>
+}
+
+export default IconButton;

src/app/page-components/PgCardPanel/CardFooter.css

@@ -0,0 +1 @@
+.card-footer {}

src/app/page-components/PgCardPanel/CardFooter.tsx

@@ -0,0 +1,11 @@
+import './CardFooter.css';
+
+interface CardFooterProps {
+    footerText: string;
+}
+
+const CardFooter = ({ footerText }: CardFooterProps) => {
+    return <div className="card-footer">{footerText}</div>
+}
+
+export default CardFooter;

src/app/page-components/PgCardPanel/CardHeader.css

@@ -0,0 +1 @@
+.card-header {}

src/app/page-components/PgCardPanel/CardHeader.tsx

@@ -0,0 +1,17 @@
+import './CardHeader.css';
+
+interface CardHeaderProps {
+    headerTitle: string;
+    infoIconContent?: string;
+    showCopyIcon?: boolean;
+}
+
+const CardHeader = ({ headerTitle, infoIconContent, showCopyIcon }: CardHeaderProps) => {
+    return <div className="card-header">
+        <div className="card-header-title">{headerTitle}</div>
+        {infoIconContent && <div className="card-header-info-icon">{infoIconContent}</div>}
+        {showCopyIcon && <div className="card-header-copy-icon">Copy</div>}
+    </div>
+}
+
+export default CardHeader;

src/app/page-components/PgCardPanel/DataSourceCard.css

@@ -0,0 +1 @@
+.data-source-card {}

src/app/page-components/PgCardPanel/DataSourceCard.tsx

@@ -0,0 +1,25 @@
+import CardFooter from './CardFooter';
+import CardHeader from './CardHeader';
+import './DataSourceCard.css';
+
+interface DataSourceCardProps {
+    dataSourceId: string;
+}
+
+const labels = {
+    infoIconContent: 'A data source is a collection of data that we want to search.',
+    headerTitle: 'Data Source',
+    footerText: 'Displaying 100 of 10000 records.',
+}
+
+const DataSourceCard = ({ dataSourceId }: DataSourceCardProps) => {
+    return <div className="data-source-card">
+        <CardHeader headerTitle={labels.headerTitle} showCopyIcon={true} infoIconContent={labels.infoIconContent} />
+
+        <div className="data-source-id">{dataSourceId}</div>
+
+        <CardFooter footerText={labels.footerText} />
+    </div>
+}
+
+export default DataSourceCard;

src/app/page-components/PgCardPanel/DbIndexCard.css

@@ -0,0 +1 @@
+.db-index-card {}

src/app/page-components/PgCardPanel/DbIndexCard.tsx

@@ -0,0 +1,20 @@
+import CardHeader from './CardHeader';
+import './DbIndexCard.css';
+
+interface DbIndexCardProps {
+    dbIndexId: string;
+}
+
+const labels = {
+    infoIconContent: 'To search data in Redis, we must create an index.',
+    headerTitle: 'DB Index',
+}
+
+const DbIndexCard = ({ dbIndexId }: DbIndexCardProps) => {
+    return <div className="db-index-card">
+        <CardHeader headerTitle={labels.headerTitle} showCopyIcon={true} infoIconContent={labels.infoIconContent} />
+        <div className="db-index-id">{dbIndexId}</div>
+    </div>
+}
+
+export default DbIndexCard;

src/app/page-components/PgCardPanel/QueryCard.css

@@ -0,0 +1 @@
+.query-card {}

src/app/page-components/PgCardPanel/QueryCard.tsx

@@ -0,0 +1,22 @@
+import CardHeader from './CardHeader';
+import './QueryCard.css';
+
+interface QueryCardProps {
+    queryId: string;
+    query: string;
+}
+
+const labels = {
+    infoIconContent: 'Try different queries to see how your data changes.',
+    headerTitle: 'Query',
+}
+
+const QueryCard = ({ queryId, query }: QueryCardProps) => {
+    return <div className="query-card">
+        <CardHeader headerTitle={labels.headerTitle} showCopyIcon={true} infoIconContent={labels.infoIconContent} />
+        <div className="query-id">{queryId}</div>
+        <div className="query">{query}</div>
+    </div>
+}
+
+export default QueryCard;

src/app/page-components/PgCardPanel/ResultCard.css

@@ -0,0 +1 @@
+.result-card {}

src/app/page-components/PgCardPanel/ResultCard.tsx

@@ -0,0 +1,28 @@
+import CardFooter from './CardFooter';
+import CardHeader from './CardHeader';
+import './ResultCard.css';
+
+
+interface ResultCardProps {
+    data: any;
+    error: any;
+}
+
+const labels = {
+    infoIconContent: 'A result is a collection of data that we want to search.',
+    headerTitle: 'Result',
+    footerText: 'No results found.',
+}
+
+const ResultCard = ({ data, error }: ResultCardProps) => {
+    return <div className="result-card">
+        <CardHeader headerTitle={labels.headerTitle} showCopyIcon={true} infoIconContent={labels.infoIconContent} />
+
+        <div>{data}</div>
+        <div>{error}</div>
+
+        <CardFooter footerText={labels.footerText} />
+    </div>
+}
+
+export default ResultCard;

src/app/page-components/PgCardPanel/index.css

@@ -0,0 +1 @@
+.card-panel {}

src/app/page-components/PgCardPanel/index.tsx

@@ -0,0 +1,17 @@
+import QueryCard from "./QueryCard";
+import DbIndexCard from "./DbIndexCard";
+import DataSourceCard from "./DataSourceCard";
+import ResultCard from "./ResultCard";
+
+import './index.css';
+
+const PgCardPanel = () => {
+    return <div className="card-panel">
+        <QueryCard queryId="1" query="SELECT * FROM users" />
+        <DbIndexCard dbIndexId="1" />
+        <DataSourceCard dataSourceId="1" />
+        <ResultCard data="data" error="error" />
+    </div>
+}
+
+export default PgCardPanel;

src/app/page-components/PgHeader/index.css

@@ -0,0 +1 @@
+.pg-header {}

src/app/page-components/PgHeader/index.tsx

@@ -0,0 +1,22 @@
+import './index.css';
+
+import IconButton from '@/app/components/IconButton';
+
+const labels = {
+    title: 'Redis Playground',
+    btnRun: 'Run',
+    btnReset: 'Reset',
+    btnShare: 'Share',
+}
+
+const PgHeader = () => {
+    return <div className="pg-header">
+
+        <div className="pg-header-title">{labels.title}</div>
+        <IconButton btnLabel={labels.btnRun} iconClass="fa fa-play" btnClass="pg-header-run-btn" />
+        <IconButton btnLabel={labels.btnReset} iconClass="fa fa-refresh" />
+        <IconButton btnLabel={labels.btnShare} iconClass="fa fa-share" />
+    </div>
+}
+
+export default PgHeader;

src/app/page-components/Playground.css

@@ -0,0 +1,7 @@
+.pg-container {
+    display: flex;
+    flex-grow: 1;
+    background-color: #ac2c2c;
+    font-size: var(--font-size-12);
+    overflow: hidden;
+}

src/app/page-components/Playground.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import "./Playground.css";
+
+import React from "react";
+
+import PgHeader from "./PgHeader";
+import PgCardPanel from "./PgCardPanel";
+
+function Playground() {
+  return (
+    <div className="pg-container">
+      <PgHeader />
+      <PgCardPanel />
+    </div>
+  );
+}
+
+export default Playground;

src/app/page.module.css

@@ -1,20 +1,7 @@
-import Image from "next/image";
-import styles from "./page.module.css";
+import Playground from "./page-components/Playground";
 
 export default function Home() {
   return (
-    <main className={styles.main}>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/redis.png"
-          alt="Redis Logo"
-          width={250}
-          height={79}
-          priority
-        />
-      </div>
-    </main>
+    <Playground />
   );
 }