feat(app): continue on recipes

src/components/Recipes/Recipes.tsx

@@ -14,7 +14,7 @@ const Recipes = () => {
         </div>
       </div>
       <div className="grid-container">
-        <IconContext.Provider value={{ size: 64 }}>
+        <IconContext.Provider value={{ size: 64, color: "var(--foreground)" }}>
           <div className="recipes grid">
             {items.map((itemProps) => (
               <Recipe key={itemProps.title} {...itemProps} />

src/components/Recipes/items/Animation.tsx

@@ -2,42 +2,34 @@ import { Cube } from "@phosphor-icons/react";
 
 import { RecipeProps } from "../Recipe";
 
-const recipe: RecipeProps = {
+const animation: RecipeProps = {
   title: "SVG Wizardry",
   url: "https://stackblitz.com/edit/react-ts-f7q7gs?file=App.tsx,style.css",
   Example() {
     return (
       <div className="example">
-        <Cube
+        <Cube color="red" weight="fill" style={{ fill: "url(#star)" }}>
-          color="darkorchid"
-          weight="duotone"
-          style={{ fill: "url(#star)" }}
-        >
           <defs>
             <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
               <polygon
                 points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"
-                fill="darkOrchid"
+                fill="red"
               />
             </pattern>
           </defs>
         </Cube>
-        <Cube
+        <Cube color="red" weight="duotone" style={{ filter: "url(#emboss)" }}>
-          color="darkorchid"
-          weight="duotone"
-          style={{ filter: "url(#emboss)" }}
-        >
           <filter id="emboss">
             <feConvolveMatrix
               kernelMatrix="
-                5 0 0
+                3 0 0
                 0 0 0
                 0 0 -3
               "
             />
           </filter>
         </Cube>
-        <Cube color="darkorchid" weight="duotone">
+        <Cube color="red" weight="duotone">
           <animate
             attributeName="opacity"
             values="0;1;0"
@@ -55,7 +47,7 @@ const recipe: RecipeProps = {
           ></animateTransform>
         </Cube>
         <Cube
-          color="darkorchid"
+          color="red"
           weight="duotone"
           style={{ filter: "url(#displacementFilter)" }}
         >
@@ -80,4 +72,4 @@ const recipe: RecipeProps = {
   },
 };
 
-export default recipe;
+export default animation;

src/components/Recipes/items/Duocolor.tsx

@@ -45,7 +45,7 @@ function createDuocolorStyle(id: string, color: string) {
   );
 }
 
-const recipe: RecipeProps = {
+const duocolor: RecipeProps = {
   title: "Duocolor",
   url: "https://stackblitz.com/edit/react-ts-kvdzu1?file=App.tsx",
   Example() {
@@ -60,4 +60,4 @@ const recipe: RecipeProps = {
   },
 };
 
-export default recipe;
+export default duocolor;

src/components/Recipes/items/Gradient.tsx

@@ -0,0 +1,60 @@
+import { Fire, Image, Peace, RainbowCloud } from "@phosphor-icons/react";
+
+import { RecipeProps } from "../Recipe";
+
+const gradient: RecipeProps = {
+  title: "Gradients",
+  url: "",
+  Example() {
+    return (
+      <div className="example">
+        <Fire weight="fill" color="url(#flame)">
+          <defs>
+            <linearGradient id="flame" x1="0%" y1="100%" x2="0%" y2="0%">
+              <stop offset="10%" stopColor="#FFDB00" />
+              <stop offset="20%" stopColor="#F8BA09" />
+              <stop offset="30%" stopColor="#F19A11" />
+              <stop offset="50%" stopColor="#E9791A" />
+              <stop offset="95%" stopColor="#E25822" />
+            </linearGradient>
+          </defs>
+        </Fire>
+
+        <RainbowCloud color="url(#spectrum)">
+          <defs>
+            <linearGradient id="spectrum">
+              <stop offset="10%" stopColor="indigo" />
+              <stop offset="20%" stopColor="blue" />
+              <stop offset="30%" stopColor="green" />
+              <stop offset="50%" stopColor="gold" />
+              <stop offset="95%" stopColor="red" />
+            </linearGradient>
+          </defs>
+        </RainbowCloud>
+
+        <Peace weight="fill" color="url(#spectrum2)">
+          <defs>
+            <radialGradient id="spectrum2">
+              <stop offset="15%" stopColor="indigo" />
+              <stop offset="25%" stopColor="blue" />
+              <stop offset="35%" stopColor="green" />
+              <stop offset="50%" stopColor="gold" />
+              <stop offset="95%" stopColor="red" />
+            </radialGradient>
+          </defs>
+        </Peace>
+
+        <Image color="url(#sunset)" weight="fill">
+          <defs>
+            <linearGradient id="sunset" x1="0%" y1="100%" x2="100%" y2="0%">
+              <stop offset="0%" stopColor="violet" />
+              <stop offset="100%" stopColor="yellow" />
+            </linearGradient>
+          </defs>
+        </Image>
+      </div>
+    );
+  },
+};
+
+export default gradient;

src/components/Recipes/items/index.ts

@@ -1,6 +1,8 @@
 import animation from "./Animation";
 import duocolor from "./Duocolor";
+import gradient from "./Gradient";
+
 import { RecipeProps } from "../Recipe";
 
-const items: RecipeProps[] = [animation, duocolor, duocolor, animation];
+const items: RecipeProps[] = [duocolor, animation, gradient];
 export default items;