diff --git a/package-lock.json b/package-lock.json index 5184068..ea93e49 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,8 @@ "react-chartjs-2": "^5.3.0", "react-dom": "^18.3.1", "react-icons": "^5.4.0", - "react-router-dom": "^7.1.5" + "react-router-dom": "^7.1.5", + "swiper": "^11.2.2" }, "devDependencies": { "@eslint/js": "^9.17.0", @@ -4258,6 +4259,25 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swiper": { + "version": "11.2.2", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.2.tgz", + "integrity": "sha512-FmAN6zACpVUbd/1prO9xQ9gKo9cc6RE2UKU/z4oXtS8fNyX4sdOW/HHT/e444WucLJs0jeMId6WjdWM2Lrs8zA==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "license": "MIT", + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/tabbable": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", diff --git a/src/App.tsx b/src/App.tsx index a6ba7b8..840ccee 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,27 +1,49 @@ -import { BarChartData } from "./assets/data/ChartData"; -import Chart from "./components/Chart"; +import CardImageBtn from "./components/CardImageBtn"; +import { dimage, mountain1, mountain2 } from "./assets/index"; +import ImageCard from "./components/ImageCard"; function App() { - const chartData = { - labels: BarChartData.map((data) => data.name), - datasets: [ - { - label: "Expenses", - data: BarChartData.map((data) => data.amt), - backgroundColor: "rgba(255, 99, 132, 0.2)", - borderColor: "rgba(255, 99, 132, 1)", - borderWidth: 1, - fill: true, - }, - ], - }; return ( <> -
- - - - + {/* Responsive Card with image, title, description with link button */} +
+ +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt nobis + deserunt accusantium tenetur doloremque laboriosam? +

+ + + +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt nobis + deserunt accusantium tenetur doloremque laboriosam? +

+ +
+ + {/* Responsive ImageCard with background image, title, description with link button */} +
+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. In, earum! +

+ + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. In, earum! +

+
); diff --git a/src/assets/AI1.jpg b/src/assets/AI1.jpg new file mode 100644 index 0000000..ca308a0 Binary files /dev/null and b/src/assets/AI1.jpg differ diff --git a/src/assets/ai2.webp b/src/assets/ai2.webp new file mode 100644 index 0000000..9cfea9b Binary files /dev/null and b/src/assets/ai2.webp differ diff --git a/src/assets/dummyImage.png b/src/assets/dummyImage.png new file mode 100644 index 0000000..dc65161 Binary files /dev/null and b/src/assets/dummyImage.png differ diff --git a/src/assets/index.ts b/src/assets/index.ts new file mode 100644 index 0000000..6fa5649 --- /dev/null +++ b/src/assets/index.ts @@ -0,0 +1,7 @@ +import dimage from "./dummyImage.png"; +import mountain1 from "./mountain.jpg"; +import mountain2 from "./mountain2.jpg"; +import AI1 from "./AI1.jpg"; +import AI2 from "./ai2.webp"; + +export { dimage, mountain2, mountain1, AI1, AI2 }; diff --git a/src/assets/mountain.jpg b/src/assets/mountain.jpg new file mode 100644 index 0000000..47f29a0 Binary files /dev/null and b/src/assets/mountain.jpg differ diff --git a/src/assets/mountain2.jpg b/src/assets/mountain2.jpg new file mode 100644 index 0000000..f83ab38 Binary files /dev/null and b/src/assets/mountain2.jpg differ diff --git a/src/components/CardImageBtn.tsx b/src/components/CardImageBtn.tsx new file mode 100644 index 0000000..0a3bbee --- /dev/null +++ b/src/components/CardImageBtn.tsx @@ -0,0 +1,21 @@ +const CardImageBtn = ({ title, imgSrc, children, btnLabel, btnLink }) => { + return ( +
+ image +

{title}

+
+

{children}

+
+ +
+ ); +}; + +export default CardImageBtn; diff --git a/src/components/Cart.tsx b/src/components/Cart.tsx deleted file mode 100644 index aac8915..0000000 --- a/src/components/Cart.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { LuShoppingCart } from "react-icons/lu"; -import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react"; -import { NavLink } from "react-router-dom"; - -const Cart = () => { - return ( - <> - - - - - - - -
- -
- - - - ); -}; - -export default Cart; diff --git a/src/components/Chart.tsx b/src/components/Chart.tsx deleted file mode 100644 index dccc408..0000000 --- a/src/components/Chart.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import DynamicChart from "./DynamicChart"; - -const Chart = ({ chartData, chartType }) => { - const options = { - responsive: true, - plugins: { - legend: { - position: "bottom", - }, - title: { - display: true, - text: "Dynamic Chart Example", - }, - }, - }; - return ( -
-
- -
-
- ); -}; - -export default Chart; diff --git a/src/components/DynamicChart.tsx b/src/components/DynamicChart.tsx deleted file mode 100644 index c841a54..0000000 --- a/src/components/DynamicChart.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Bar, Line, Pie, Doughnut } from "react-chartjs-2"; -import { - Chart as ChartJS, - CategoryScale, - LinearScale, - BarElement, - LineElement, - ArcElement, - Title, - Tooltip, - Legend, - Filler, - PointElement, -} from "chart.js"; - -ChartJS.register( - ArcElement, - CategoryScale, - LinearScale, - PointElement, - LineElement, - BarElement, - Title, - Tooltip, - Legend, - Filler -); - -const chartComponents = { - bar: Bar, - line: Line, - pie: Pie, - doughnut: Doughnut, -}; - -const DynamicChart = ({ type, data, options }) => { - const ChartComponent = chartComponents[type]; - return ChartComponent ? ( - - ) : null; -}; - -export default DynamicChart; diff --git a/src/components/ImageCard.tsx b/src/components/ImageCard.tsx new file mode 100644 index 0000000..76c0b3d --- /dev/null +++ b/src/components/ImageCard.tsx @@ -0,0 +1,36 @@ +import { BiBookmark, BiHeart, BiShare } from "react-icons/bi"; +import Iocnbutton from "./Iocnbutton"; + +const ImageCard = ({ title, bgImage, children, ...props }) => { + return ( +
+ background Image +
+
+

{title}

+ {children} +
+ + + + + + + + + +
+
+
+
+ ); +}; + +export default ImageCard; diff --git a/src/components/Iocnbutton.tsx b/src/components/Iocnbutton.tsx new file mode 100644 index 0000000..81cff80 --- /dev/null +++ b/src/components/Iocnbutton.tsx @@ -0,0 +1,9 @@ +const Iocnbutton = ({ children }) => { + return ( + <> + + + ); +}; + +export default Iocnbutton;