final stylings

src/components/choose-chart-sample/select-chart.tsx

-// "use client";
-// import DefaultLayout from "@/components/Layouts/DefaultLayout";
-// import { useRouter, usePathname, useSearchParams}  from 'next/navigation';
-// import React, { useEffect } from "react";
-
-// const SelectChart: React.FC = () => {
-//   const router = useRouter();
-//   //get the query parameters -  id here 
-
-
-//   const pathname = usePathname()
-//   const searchParams = useSearchParams()
-//   useEffect(() => {
-//     const url = `${pathname}?${searchParams}`
-//     console.log(url)
-//     // You can now use the current URL
-//     // ...
-//   }, [pathname, searchParams])
-
-//   // You can use id, name, and description here to render the details
-
-//   return (
-//     <DefaultLayout>
-//         <div>
-//             <h1>Choose Chart</h1>
-
-//         </div>
-//     </DefaultLayout>
-//   );
-// };
-
-// export default SelectChart;
 
 
 import { useRouter, usePathname, useSearchParams}  from 'next/navigation';
@@ -43,13 +11,17 @@ const SelectChart: React.FC = () => {
     <DefaultLayout>
       <div>
       <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center' }}>
-<<<<<<< Updated upstream
-      <ChartOptionCard chartType="Bar Chart" />
-      <ChartOptionCard chartType="Line Chart" />
-      <ChartOptionCard chartType="Pie Chart" />
-      <ChartOptionCard chartType="Scatter Chart" />
-      <ChartOptionCard chartType="Area Chart" />
-=======
+      <h2>
+          <strong>Choose a chart type</strong>
+        </h2>
+        <p>
+          It is important to choose the type of visualization fits your data
+          best. Choose the chart type that represents your data accurately or
+          pick the recommended type.
+        </p>
+        <br />
+      
+
       <ChartOptionCard chartType="Bar Chart" description="Comparisons"/>
       <ChartOptionCard chartType="Line Chart" description="Trends over time"/>
       <ChartOptionCard chartType="Pie Chart" description="Proportions"/>
@@ -58,7 +30,6 @@ const SelectChart: React.FC = () => {
       <ChartOptionCard chartType="TreeMap Chart" description="Hierarchical data"/>
       <ChartOptionCard chartType="Funnel Chart" description="Sales process"/>
       <ChartOptionCard chartType="Radar Chart" description="Comparisons"/>
->>>>>>> Stashed changes
       {/* Add more chart options as needed */}
     </div>
       </div>
@@ -66,7 +37,7 @@ const SelectChart: React.FC = () => {
   );
 };
 
-const ChartOptionCard: React.FC<{ chartType: string }> = ({ chartType }) => {
+const ChartOptionCard: React.FC<{ chartType: string, description: string }> = ({ chartType, description }) => {
   const router = useRouter();
   const searchParams = useSearchParams()
   const handleChartSelection = () => {
@@ -90,7 +61,11 @@ const ChartOptionCard: React.FC<{ chartType: string }> = ({ chartType }) => {
         />
         <Typography variant="h6" component="h2">
           {chartType}
+          <br />
+          {description}
+
         </Typography>
+       
       </CardContent>
     </Card>
   );