types

Author: hmdroh

apps/web/components/gradient-editor.tsx

@@ -73,6 +73,7 @@ const gradientTypes = [
   { label: "Nano", value: "nano" },
   { label: "Mini", value: "mini" },
   { label: "Pink", value: "pink" },
+  { label: "Conic", value: "conic" },
 ];
 
 export default function GradientEditor() {
@@ -98,6 +99,7 @@ export default function GradientEditor() {
     gradientType: "default",
     gradientWidth: 300,
     gradientHeight: 200,
+    blurAmount: 0,
   });
 
   const {
@@ -119,6 +121,7 @@ export default function GradientEditor() {
     gradientWidth,
     gradientHeight,
     gradientType,
+    blurAmount,
   } = state;
 
   // Load from localStorage on mount
@@ -178,7 +181,15 @@ export default function GradientEditor() {
           className="w-full px-2 border rounded-md"
           value={gradientType}
           name="gradientType"
-          onChange={(e) => setStateValue(e.target.name, e.target.value)}
+          onChange={(e) => {
+            if (e.target.value === "conic") {
+              setStateValue("blurAmount", 40);
+            } else {
+              setStateValue("blurAmount", 0);
+            }
+              setStateValue(e.target.name, e.target.value);
+
+          }}
         >
           {gradientTypes.map((type) => (
             <option key={type.value} value={type.value}>
@@ -187,6 +198,20 @@ export default function GradientEditor() {
           ))}
         </select>
 
+        {/* Blur Amount */}
+        <p>Blur Amount: {blurAmount}px</p>
+        <input
+          type="range"
+          min="0"
+          name="blurAmount"
+          max="100"
+          value={blurAmount || 0}
+          onChange={(e) =>
+            setStateValue(e.target.name, Number(e.target.value))
+          }
+          className="w-full"
+        />
+
         <p>Title:</p>
         <input
           className="w-full px-2 border rounded-md"
@@ -409,6 +434,7 @@ export default function GradientEditor() {
             gradientWidth={gradientWidth}
             gradientHeight={gradientHeight}
             rounded={rounded}
+            blurAmount={blurAmount}
             scale={scale}
             gradientType={gradientType}
             styles={{

apps/web/public/640.webp

@@ -19,6 +19,7 @@ interface GradientPreviewProps {
   gradientWidth?: number;
   gradientHeight?: number;
   gradientType?: string;
+  blurAmount?: number;
 }
 
 export const GradientPreview: React.FC<GradientPreviewProps> = ({
@@ -34,6 +35,7 @@ export const GradientPreview: React.FC<GradientPreviewProps> = ({
   gradientWidth,
   gradientHeight,
   gradientType = "default",
+  blurAmount = 0,
 }) => {
   return (
     <CardContainer
@@ -45,7 +47,10 @@ export const GradientPreview: React.FC<GradientPreviewProps> = ({
       lightMode={true}
       scale={scale}
     >
-      {title && (
+      <div style={{
+        position: "relative",
+      }}>
+        {title && (
         <div
           className="roboto-flex mb-4 text-center font-bold"
           style={{
@@ -65,6 +70,7 @@ export const GradientPreview: React.FC<GradientPreviewProps> = ({
             width: "100%",
             height: gradientHeight ? gradientHeight : 200,
             marginBottom: "16px",
+            filter: `blur(${blurAmount}px)`,
           }}
         >
           <PastelGradientCanvas
@@ -92,6 +98,7 @@ export const GradientPreview: React.FC<GradientPreviewProps> = ({
             width: gradientWidth ? gradientWidth + "px" : "100%",
             height: gradientHeight ? gradientHeight + "px" : "100%",
             borderRadius: rounded ? "15px" : "0",
+            filter: `blur(${blurAmount}px)`,
           }}
           src="/gpt-5-nano-1.jpg"
           width={100}
@@ -117,6 +124,7 @@ export const GradientPreview: React.FC<GradientPreviewProps> = ({
             width: gradientWidth ? gradientWidth + "px" : "100%",
             height: gradientHeight ? gradientHeight + "px" : "100%",
             borderRadius: rounded ? "15px" : "0",
+            filter: `blur(${blurAmount}px)`,
           }}
           src="/gpt-5-mini.jpg"
           width={100}
@@ -142,6 +150,7 @@ export const GradientPreview: React.FC<GradientPreviewProps> = ({
             width: gradientWidth ? gradientWidth + "px" : "100%",
             height: gradientHeight ? gradientHeight + "px" : "100%",
             borderRadius: rounded ? "15px" : "0",
+            filter: `blur(${blurAmount}px)`,
           }}
           src="/gpt-5.jpg"
           width={100}
@@ -151,6 +160,33 @@ export const GradientPreview: React.FC<GradientPreviewProps> = ({
       </div>)}
 
 
+{gradientType === "conic" && (
+        <div
+        style={{
+          display: "absolute",
+          inset: 0,
+          justifyContent: "center",
+          alignItems: "center",
+          width: "100%",
+          height: gradientHeight ? gradientHeight : 200,
+          marginBottom: "16px",
+        }}
+      >
+        <img
+          style={{
+            objectFit: "cover",
+            // mouse event none
+            pointerEvents: "none",
+            display: "inline-block",
+            width: gradientWidth ? gradientWidth + "px" : "100%",
+            height: gradientHeight ? gradientHeight + "px" : "100%",
+            borderRadius: rounded ? "15px" : "0",
+            filter: `blur(${blurAmount}px)`,
+          }}
+          src="/640.webp"
+          alt="Background"
+        />
+      </div>)}
 
 
       <div
@@ -171,6 +207,7 @@ export const GradientPreview: React.FC<GradientPreviewProps> = ({
           </div>
         )}
       </div>
+      </div>
     </CardContainer>
   );
 };