Merge pull request #105 from chingu-voyages/CH-84-graphic-assets

feat(assets): add art and picture components

src/assets/brand/chef-carrots/ChefCarrots.jsx

@@ -0,0 +1,60 @@
+import PropTypes from "prop-types";
+import { Picture } from "@/features/ui";
+
+// WebP Imports
+import Webp180 from "./chef-carrots-180w.webp";
+import Webp300 from "./chef-carrots-300w.webp";
+import Webp396 from "./chef-carrots-396w.webp";
+import Webp600 from "./chef-carrots-600w.webp";
+import Webp900 from "./chef-carrots-900w.webp";
+import Webp1200 from "./chef-carrots-1200w.webp";
+
+// PNG Imports
+import Png180 from "./chef-carrots-180w.png";
+import Png300 from "./chef-carrots-300w.png";
+import Png396 from "./chef-carrots-396w.png";
+import Png600 from "./chef-carrots-600w.png";
+import Png900 from "./chef-carrots-900w.png";
+import Png1200 from "./chef-carrots-1200w.png";
+
+const files = {
+  webp: {
+    180: Webp180,
+    300: Webp300,
+    396: Webp396,
+    600: Webp600,
+    900: Webp900,
+    1200: Webp1200,
+  },
+  png: {
+    180: Png180,
+    300: Png300,
+    396: Png396,
+    600: Png600,
+    900: Png900,
+    1200: Png1200,
+  },
+};
+
+const ChefCarrots = ({
+  resolution = 360,
+  alt = "Chef Carrots the Friendly Bunny",
+  className,
+}) => {
+  return (
+    <Picture
+      alt={alt}
+      resolution={resolution}
+      files={files}
+      className={className}
+    />
+  );
+};
+
+ChefCarrots.propTypes = {
+  alt: PropTypes.string,
+  resolution: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  className: PropTypes.string,
+};
+
+export default ChefCarrots;

src/assets/brand/lime/Lime.jsx

@@ -0,0 +1,68 @@
+import PropTypes from "prop-types";
+import { Picture } from "@/features/ui";
+
+// WebP Imports
+import Webp111 from "./lime-111w.webp";
+import Webp167 from "./lime-167w.webp";
+import Webp279 from "./lime-279w.webp";
+import Webp368 from "./lime-368w.webp";
+import Webp557 from "./lime-557w.webp";
+import Webp836 from "./lime-836w.webp";
+import Webp891 from "./lime-891w.webp";
+import Webp1003 from "./lime-1003w.webp";
+import Webp1114 from "./lime-1114w.webp";
+
+// PNG Imports
+import Png111 from "./lime-111w.png";
+import Png167 from "./lime-167w.png";
+import Png279 from "./lime-279w.png";
+import Png368 from "./lime-368w.png";
+import Png557 from "./lime-557w.png";
+import Png836 from "./lime-836w.png";
+import Png891 from "./lime-891w.png";
+import Png1003 from "./lime-1003w.png";
+import Png1114 from "./lime-1114w.png";
+
+const files = {
+  webp: {
+    111: Webp111,
+    167: Webp167,
+    279: Webp279,
+    368: Webp368,
+    557: Webp557,
+    836: Webp836,
+    891: Webp891,
+    1003: Webp1003,
+    1114: Webp1114,
+  },
+  png: {
+    111: Png111,
+    167: Png167,
+    279: Png279,
+    368: Png368,
+    557: Png557,
+    836: Png836,
+    891: Png891,
+    1003: Png1003,
+    1114: Png1114,
+  },
+};
+
+const Lime = ({ resolution = 360, alt = "Lemons and Lime", className }) => {
+  return (
+    <Picture
+      alt={alt}
+      resolution={resolution}
+      files={files}
+      className={className}
+    />
+  );
+};
+
+Lime.propTypes = {
+  alt: PropTypes.string,
+  resolution: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  className: PropTypes.string,
+};
+
+export default Lime;

src/assets/brand/plants-tl/PlantsTL.jsx

@@ -0,0 +1,60 @@
+import PropTypes from "prop-types";
+import { Picture } from "@/features/ui";
+
+// WebP Imports
+import Webp59 from "./lime-59w.webp";
+import Webp147 from "./lime-147w.webp";
+import Webp194 from "./lime-194w.webp";
+import Webp295 from "./lime-295w.webp";
+import Webp442 from "./lime-442w.webp";
+import Webp471 from "./lime-471w.webp";
+import Webp589 from "./lime-589w.webp";
+
+// PNG Imports
+import Png59 from "./lime-59w.png";
+import Png147 from "./lime-147w.png";
+import Png194 from "./lime-194w.png";
+import Png295 from "./lime-295w.png";
+import Png442 from "./lime-442w.png";
+import Png471 from "./lime-471w.png";
+import Png589 from "./lime-589w.png";
+
+const files = {
+  webp: {
+    59: Webp59,
+    147: Webp147,
+    194: Webp194,
+    295: Webp295,
+    442: Webp442,
+    471: Webp471,
+    589: Webp589,
+  },
+  png: {
+    59: Png59,
+    147: Png147,
+    194: Png194,
+    295: Png295,
+    442: Png442,
+    471: Png471,
+    589: Png589,
+  },
+};
+
+const PlantsTL = ({ resolution = 360, alt = "Green Leaves", className }) => {
+  return (
+    <Picture
+      alt={alt}
+      resolution={resolution}
+      files={files}
+      className={className}
+    />
+  );
+};
+
+PlantsTL.propTypes = {
+  alt: PropTypes.string,
+  resolution: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  className: PropTypes.string,
+};
+
+export default PlantsTL;

src/assets/brand/tomato/Tomato.jsx

@@ -0,0 +1,56 @@
+import PropTypes from "prop-types";
+import { Picture } from "@/features/ui";
+
+// WebP Imports
+import Webp29 from "./tomato-29w.webp";
+import Webp44 from "./tomato-44w.webp";
+import Webp73 from "./tomato-73w.webp";
+import Webp145 from "./tomato-145w.webp";
+import Webp218 from "./tomato-218w.webp";
+import Webp290 from "./tomato-290w.webp";
+
+// PNG Imports
+import Png29 from "./tomato-29w.png";
+import Png44 from "./tomato-44w.png";
+import Png73 from "./tomato-73w.png";
+import Png145 from "./tomato-145w.png";
+import Png218 from "./tomato-218w.png";
+import Png290 from "./tomato-290w.png";
+
+const files = {
+  webp: {
+    29: Webp29,
+    44: Webp44,
+    73: Webp73,
+    145: Webp145,
+    218: Webp218,
+    290: Webp290,
+  },
+  png: {
+    29: Png29,
+    44: Png44,
+    73: Png73,
+    145: Png145,
+    218: Png218,
+    290: Png290,
+  },
+};
+
+const Tomato = ({ resolution = 360, alt = "A Tomato", className }) => {
+  return (
+    <Picture
+      alt={alt}
+      resolution={resolution}
+      files={files}
+      className={className}
+    />
+  );
+};
+
+Tomato.propTypes = {
+  alt: PropTypes.string,
+  resolution: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  className: PropTypes.string,
+};
+
+export default Tomato;

src/assets/brand/yellow-pepper/YellowPepper.jsx

@@ -0,0 +1,60 @@
+import PropTypes from "prop-types";
+import { Picture } from "@/features/ui";
+
+// WebP Imports
+import Webp48 from "./yellow-pepper-48w.webp";
+import Webp79 from "./yellow-pepper-79w.webp";
+import Webp105 from "./yellow-pepper-105w.webp";
+import Webp159 from "./yellow-pepper-159w.webp";
+import Webp238 from "./yellow-pepper-238w.webp";
+import Webp317 from "./yellow-pepper-317w.webp";
+
+// PNG Imports
+import Png48 from "./yellow-pepper-48w.png";
+import Png79 from "./yellow-pepper-79w.png";
+import Png105 from "./yellow-pepper-105w.png";
+import Png159 from "./yellow-pepper-159w.png";
+import Png238 from "./yellow-pepper-238w.png";
+import Png317 from "./yellow-pepper-317w.png";
+
+const files = {
+  webp: {
+    48: Webp48,
+    79: Webp79,
+    105: Webp105,
+    159: Webp159,
+    238: Webp238,
+    317: Webp317,
+  },
+  png: {
+    48: Png48,
+    79: Png79,
+    105: Png105,
+    159: Png159,
+    238: Png238,
+    317: Png317,
+  },
+};
+
+const YellowPepper = ({
+  resolution = 360,
+  alt = "A Large Yellow Pepper",
+  className,
+}) => {
+  return (
+    <Picture
+      alt={alt}
+      resolution={resolution}
+      files={files}
+      className={className}
+    />
+  );
+};
+
+YellowPepper.propTypes = {
+  alt: PropTypes.string,
+  resolution: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  className: PropTypes.string,
+};
+
+export default YellowPepper;

src/assets/brand/yumi-with-basket/YumiWithBasket.jsx

@@ -0,0 +1,68 @@
+import PropTypes from "prop-types";
+import { Picture } from "@/features/ui";
+
+// WebP Imports
+import Webp180 from "./yumi-with-basket-180w.webp";
+import Webp300 from "./yumi-with-basket-300w.webp";
+import Webp360 from "./yumi-with-basket-360w.webp";
+import Webp396 from "./yumi-with-basket-396w.webp";
+import Webp600 from "./yumi-with-basket-600w.webp";
+import Webp900 from "./yumi-with-basket-900w.webp";
+import Webp960 from "./yumi-with-basket-960w.webp";
+import Webp1200 from "./yumi-with-basket-1200w.webp";
+
+// PNG Imports
+import Png180 from "./yumi-with-basket-180w.png";
+import Png300 from "./yumi-with-basket-300w.png";
+import Png360 from "./yumi-with-basket-360w.png";
+import Png396 from "./yumi-with-basket-396w.png";
+import Png600 from "./yumi-with-basket-600w.png";
+import Png900 from "./yumi-with-basket-900w.png";
+import Png960 from "./yumi-with-basket-960w.png";
+import Png1200 from "./yumi-with-basket-1200w.png";
+
+const files = {
+  webp: {
+    180: Webp180,
+    300: Webp300,
+    360: Webp360,
+    396: Webp396,
+    600: Webp600,
+    900: Webp900,
+    960: Webp960,
+    1200: Webp1200,
+  },
+  png: {
+    180: Png180,
+    300: Png300,
+    360: Png360,
+    396: Png396,
+    600: Png600,
+    900: Png900,
+    960: Png960,
+    1200: Png1200,
+  },
+};
+
+const YumiWithBasket = ({
+  resolution = 360,
+  alt = "Yumi Holding a Basket of Fresh Vegetables",
+  className,
+}) => {
+  return (
+    <Picture
+      alt={alt}
+      resolution={resolution}
+      files={files}
+      className={className}
+    />
+  );
+};
+
+YumiWithBasket.propTypes = {
+  alt: PropTypes.string,
+  resolution: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  className: PropTypes.string,
+};
+
+export default YumiWithBasket;