Sparkle: Changes for new Homepage (#2379)

Author: PopDaph

sparkle/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.31",
+  "version": "0.2.32",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

sparkle/package.json

@@ -165,6 +165,7 @@ import {
   ChevronRight as ChevronRightIcon,
   ChevronUp as ChevronUpIcon,
   ChevronUpDown as ChevronUpDownIcon,
+  Circle as CircleIcon,
   Clipboard as ClipboardIcon,
   ClipboardCheck as ClipboardCheckIcon,
   Clock as ClockIcon,
@@ -190,6 +191,7 @@ import {
   GlobeAlt as GlobeAltIcon,
   HandThumbDown as HandThumbDownIcon,
   HandThumbUp as HandThumbUpIcon,
+  Hexagon as HexagonIcon,
   Image as ImageIcon,
   InformationCircle as InformationCircleIcon,
   Key as KeyIcon,
@@ -212,16 +214,19 @@ import {
   PlusCircle as PlusCircleIcon,
   QuestionMarkCircle as QuestionMarkCircleIcon,
   Reaction as ReactionIcon,
+  Rectangle as RectangleIcon,
   Robot as RobotIcon,
   Rocket as RocketIcon,
   Server as ServerIcon,
   ShakeHands as ShakeHandsIcon,
   Shapes as ShapesIcon,
   Sparkles as SparklesIcon,
+  Square as SquareIcon,
   Square3Stack3D as Square3Stack3DIcon,
   Stop as StopIcon,
   TestTube as TestTubeIcon,
   Trash as TrashIcon,
+  Triangle as TriangleIcon,
   User as UserIcon,
   UserArrow as UserArrowIcon,
   UserGroup as UserGroupIcon,
@@ -252,6 +257,7 @@ export {
   ChevronRightIcon,
   ChevronUpDownIcon,
   ChevronUpIcon,
+  CircleIcon,
   ClipboardCheckIcon,
   ClipboardIcon,
   ClockIcon,
@@ -277,6 +283,7 @@ export {
   GlobeAltIcon,
   HandThumbDownIcon,
   HandThumbUpIcon,
+  HexagonIcon,
   ImageIcon,
   InformationCircleIcon,
   KeyIcon,
@@ -299,16 +306,19 @@ export {
   PlusIcon,
   QuestionMarkCircleIcon,
   ReactionIcon,
+  RectangleIcon,
   RobotIcon,
   RocketIcon,
   ServerIcon,
   ShakeHandsIcon,
   ShapesIcon,
   SparklesIcon,
   Square3Stack3DIcon,
+  SquareIcon,
   StopIcon,
   TestTubeIcon,
   TrashIcon,
+  TriangleIcon,
   UserArrowIcon,
   UserGroupIcon,
   UserIcon,
@@ -339,6 +349,7 @@ import {
   ChevronRight as ChevronRightStrokeIcon,
   ChevronUp as ChevronUpStrokeIcon,
   ChevronUpDown as ChevronUpDownStrokeIcon,
+  Circle as CircleStrokeIcon,
   Clipboard as ClipboardStrokeIcon,
   ClipboardCheck as ClipboardCheckStrokeIcon,
   Clock as ClockStrokeIcon,
@@ -364,6 +375,7 @@ import {
   GlobeAlt as GlobeAltStrokeIcon,
   HandThumbDown as HandThumbDownStrokeIcon,
   HandThumbUp as HandThumbUpStrokeIcon,
+  Hexagon as HexagonStrokeIcon,
   Image as ImageStrokeIcon,
   InformationCircle as InformationCircleStrokeIcon,
   Key as KeyStrokeIcon,
@@ -386,16 +398,19 @@ import {
   PlusCircle as PlusCircleStrokeIcon,
   QuestionMarkCircle as QuestionMarkCircleStrokeIcon,
   Reaction as ReactionStrokeIcon,
+  Rectangle as RectangleStrokeIcon,
   Robot as RobotStrokeIcon,
   Rocket as RocketStrokeIcon,
   Server as ServerStrokeIcon,
   ShakeHands as ShakeHandsStrokeIcon,
   Shapes as ShapesStrokeIcon,
   Sparkles as SparklesStrokeIcon,
+  Square as SquareStrokeIcon,
   Square3Stack3D as Square3Stack3DStrokeIcon,
   Stop as StopStrokeIcon,
   TestTube as TestTubeStrokeIcon,
   Trash as TrashStrokeIcon,
+  Triangle as TriangleStrokeIcon,
   User as UserStrokeIcon,
   UserArrow as UserArrowStrokeIcon,
   UserGroup as UserGroupStrokeIcon,
@@ -426,6 +441,7 @@ export {
   ChevronRightStrokeIcon,
   ChevronUpDownStrokeIcon,
   ChevronUpStrokeIcon,
+  CircleStrokeIcon,
   ClipboardCheckStrokeIcon,
   ClipboardStrokeIcon,
   ClockStrokeIcon,
@@ -451,6 +467,7 @@ export {
   GlobeAltStrokeIcon,
   HandThumbDownStrokeIcon,
   HandThumbUpStrokeIcon,
+  HexagonStrokeIcon,
   ImageStrokeIcon,
   InformationCircleStrokeIcon,
   KeyStrokeIcon,
@@ -473,16 +490,19 @@ export {
   PlusStrokeIcon,
   QuestionMarkCircleStrokeIcon,
   ReactionStrokeIcon,
+  RectangleStrokeIcon,
   RobotStrokeIcon,
   RocketStrokeIcon,
   ServerStrokeIcon,
   ShakeHandsStrokeIcon,
   ShapesStrokeIcon,
   SparklesStrokeIcon,
   Square3Stack3DStrokeIcon,
+  SquareStrokeIcon,
   StopStrokeIcon,
   TestTubeStrokeIcon,
   TrashStrokeIcon,
+  TriangleStrokeIcon,
   UserArrowStrokeIcon,
   UserGroupStrokeIcon,
   UserPlusStrokeIcon,

sparkle/src/_index.ts

@@ -17,11 +17,13 @@ interface PriceTableProps {
 }
 
 const colorTable = {
-  pink: "s-bg-pink-400 dark:s-bg-pink-500",
-  amber: "s-bg-amber-400 dark:s-bg-amber-500",
-  sky: "s-bg-sky-400 dark:s-bg-sky-500",
-  blue: "s-bg-blue-400 dark:s-bg-blue-500",
-  emerald: "s-bg-emerald-400 dark:s-bg-emerald-500",
+  pink: "s-bg-gradient-to-r s-from-pink-400 s-to-red-300 dark:s-bg-pink-500",
+  amber:
+    "s-bg-gradient-to-r s-from-amber-400 s-to-yellow-300 s-bg-amber-400 dark:s-bg-amber-500",
+  sky: "s-bg-gradient-to-r s-from-sky-400 s-to-blue-400 s-bg-sky-400 dark:s-bg-sky-500",
+  blue: "s-bg-gradient-to-r s-from-blue-400 s-to-indigo-300 s-bg-blue-400 dark:s-bg-blue-500",
+  emerald:
+    "s-bg-gradient-to-r s-from-emerald-400 s-to-green-400 s-bg-emerald-400 dark:s-bg-emerald-500",
 };
 
 const textColorTable = {
@@ -33,8 +35,8 @@ const textColorTable = {
 };
 
 const sizeTable = {
-  sm: "s-rounded-2xl s-p-1.5 s-shadow-2xl",
-  xs: "s-rounded-xl s-p-1 s-shadow-xl",
+  sm: "s-rounded-2xl s-p-px s-shadow-2xl",
+  xs: "s-rounded-2xl s-p-px s-shadow-xl",
 };
 
 export function PriceTable({
@@ -77,7 +79,7 @@ export function PriceTable({
       <div
         className={classNames(
           "s-flex s-flex-col",
-          size === "xs" ? "s-px-3 s-py-2" : "s-px-4 s-py-3"
+          size === "xs" ? "s-px-4 s-py-3" : "s-px-5 s-py-4"
         )}
       >
         <div
@@ -110,8 +112,13 @@ export function PriceTable({
         </div>
       </div>
       <div
+        style={{
+          borderBottomRightRadius: "15px",
+          borderBottomLeftRadius: "15px",
+          borderTopRightRadius: "4px",
+          borderTopLeftRadius: "4px",
+        }}
         className={classNames(
-          size === "xs" ? "s-rounded-lg" : "s-rounded-xl",
           "s-flex s-h-full s-flex-col s-overflow-hidden s-shadow-md",
           "s-bg-white dark:s-bg-structure-100-dark"
         )}

sparkle/src/components/PriceTable.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgCircle = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path fill="currentColor" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" />
+  </svg>
+);
+export default SvgCircle;

sparkle/src/icons/solid/Circle.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgHexagon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path fill="currentColor" d="m17 3 5 9-5 9H7l-5-9 5-9h10Z" />
+  </svg>
+);
+export default SvgHexagon;

sparkle/src/icons/solid/Hexagon.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgRectangle = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path fill="currentColor" d="M7 2h10v20H7z" />
+  </svg>
+);
+export default SvgRectangle;

sparkle/src/icons/solid/Rectangle.tsx

@@ -13,7 +13,7 @@ const SvgRobot = (props: SVGProps<SVGSVGElement>) => (
     <path
       fill="currentColor"
       fillRule="evenodd"
-      d="M18 5a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h12Zm-9 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm7.5-1.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0ZM12 16c1.03 0 2.034-.111 3-.322V14H9v1.678c.966.21 1.97.322 3 .322Z"
+      d="M18 5a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h12Zm-9 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm7.5-1.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0ZM12 16c1.03 0 2 0 3-1v-1H9v1c1 1 1.97 1 3 1Z"
       clipRule="evenodd"
     />
     <path fill="currentColor" d="M2 10H0v6h2v-6ZM24 10h-2v6h2v-6Z" />

sparkle/src/icons/solid/Robot.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgSquare = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path fill="currentColor" d="M4 4h16v16H4z" />
+  </svg>
+);
+export default SvgSquare;

sparkle/src/icons/solid/Square.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgTriangle = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path fill="currentColor" d="m12 3 10.392 18H1.608L12 3Z" />
+  </svg>
+);
+export default SvgTriangle;

sparkle/src/icons/solid/Triangle.tsx

@@ -18,6 +18,7 @@ export { default as ChevronLeft } from "./ChevronLeft";
 export { default as ChevronRight } from "./ChevronRight";
 export { default as ChevronUp } from "./ChevronUp";
 export { default as ChevronUpDown } from "./ChevronUpDown";
+export { default as Circle } from "./Circle";
 export { default as Clipboard } from "./Clipboard";
 export { default as ClipboardCheck } from "./ClipboardCheck";
 export { default as Clock } from "./Clock";
@@ -43,6 +44,7 @@ export { default as Fullscreen } from "./Fullscreen";
 export { default as GlobeAlt } from "./GlobeAlt";
 export { default as HandThumbDown } from "./HandThumbDown";
 export { default as HandThumbUp } from "./HandThumbUp";
+export { default as Hexagon } from "./Hexagon";
 export { default as Image } from "./Image";
 export { default as InformationCircle } from "./InformationCircle";
 export { default as Key } from "./Key";
@@ -65,16 +67,19 @@ export { default as Plus } from "./Plus";
 export { default as PlusCircle } from "./PlusCircle";
 export { default as QuestionMarkCircle } from "./QuestionMarkCircle";
 export { default as Reaction } from "./Reaction";
+export { default as Rectangle } from "./Rectangle";
 export { default as Robot } from "./Robot";
 export { default as Rocket } from "./Rocket";
 export { default as Server } from "./Server";
 export { default as ShakeHands } from "./ShakeHands";
 export { default as Shapes } from "./Shapes";
 export { default as Sparkles } from "./Sparkles";
+export { default as Square } from "./Square";
 export { default as Square3Stack3D } from "./Square3Stack3D";
 export { default as Stop } from "./Stop";
 export { default as TestTube } from "./TestTube";
 export { default as Trash } from "./Trash";
+export { default as Triangle } from "./Triangle";
 export { default as User } from "./User";
 export { default as UserArrow } from "./UserArrow";
 export { default as UserGroup } from "./UserGroup";