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;