Price table (#2030)

* creating Table Price

* Small tweaks

* bumping version

---------

Co-authored-by: édouard wautier <[email protected]>

front/components/assistant/conversation/InputBar.tsx

@@ -382,7 +382,7 @@ export function AssistantInputBar({
           <div
             className={classNames(
               "relative flex flex-1 flex-row items-stretch px-4",
-              "s-bg-white/80 s-backdrop-blur  border-2 border-action-300 focus-within:border-action-400",
+              "s-backdrop-blur border-2  border-action-300 bg-white/80 focus-within:border-action-400",
               "rounded-xl drop-shadow-2xl transition-all duration-300",
               isAnimating
                 ? "animate-shake border-action-500 focus-within:border-action-800"

sparkle/package.json

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

sparkle/src/_index.ts

@@ -38,6 +38,9 @@ export { PageHeader };
 import { BarHeader } from "./components/BarHeader";
 export { BarHeader };
 
+import { PriceTable } from "./components/PriceTable";
+export { PriceTable };
+
 import { Icon } from "./components/Icon";
 export { Icon };
 

sparkle/src/components/PriceTable.tsx

@@ -0,0 +1,128 @@
+import React, { ReactNode } from "react";
+
+import { Check, Dash, XMark } from "@sparkle/icons/solid";
+import { classNames } from "@sparkle/lib/utils";
+
+import { Icon } from "./Icon";
+
+interface PriceTableProps {
+  title: string;
+  price: string;
+  priceLabel?: string;
+  color?: "pink" | "sky" | "emerald";
+  className?: string;
+  children: ReactNode;
+}
+
+const colorTable = {
+  pink: "s-bg-pink-400",
+  sky: "s-bg-sky-400",
+  emerald: "s-bg-emerald-400",
+};
+
+export function PriceTable({
+  title,
+  price,
+  color = "pink",
+  priceLabel = "",
+  className = "",
+  children, // Use children instead of tableItems
+}: PriceTableProps) {
+  return (
+    <div
+      className={classNames(
+        "s-flex s-flex-col s-rounded-xl s-p-1 s-shadow-xl",
+        colorTable[color],
+        className
+      )}
+    >
+      <div className="s-flex s-flex-col s-px-3 s-py-2">
+        <div className="s-w-full s-text-right s-text-2xl s-font-semibold s-text-white">
+          {title}
+        </div>
+        <div className="-s-mt-2 s-flex s-flex-row s-items-baseline s-gap-2">
+          <span className="s-text-element-950 s-text-3xl s-font-bold">
+            {price}
+          </span>
+          <span className="s-text-base s-font-bold s-text-white/70">
+            {priceLabel}
+          </span>
+        </div>
+      </div>
+      <div className="s-flex s-h-full s-flex-col s-overflow-hidden s-rounded-lg s-bg-white s-shadow-md">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+const iconTable = {
+  check: Check,
+  dash: Dash,
+  xmark: XMark,
+};
+
+const iconColorTable = {
+  check: "s-text-emerald-500",
+  dash: "s-text-amber-500",
+  xmark: "s-text-red-500",
+};
+
+interface PriceTableItemProps {
+  label: string;
+  variant?: "check" | "dash" | "xmark";
+  className?: string;
+}
+
+PriceTable.Item = function ({
+  label,
+  variant = "check",
+  className = "",
+}: PriceTableItemProps) {
+  return (
+    <div
+      className={classNames(
+        "s-flex s-items-center s-gap-1.5 s-border-b s-border-structure-100 s-px-2 s-py-2.5 s-text-sm s-text-element-800 ",
+        className
+      )}
+    >
+      <div>
+        <Icon
+          size="xs"
+          visual={iconTable[variant]}
+          className={iconColorTable[variant]}
+        />
+      </div>
+      <div
+        className={classNames(
+          variant === "xmark" ? "s-text-element-600" : "",
+          "s-overflow-hidden s-overflow-ellipsis s-whitespace-nowrap"
+        )}
+      >
+        {label}
+      </div>
+    </div>
+  );
+};
+
+interface PriceTableActionContainerProps {
+  children: ReactNode;
+}
+
+PriceTable.ActionContainer = function ({
+  children,
+}: PriceTableActionContainerProps) {
+  return (
+    <div className="s-flex s-w-full s-flex-grow s-justify-center s-p-2">
+      <div className="s-flex s-h-full s-flex-col s-justify-end">{children}</div>
+    </div>
+  );
+};
+
+interface PriceTableContainerProps {
+  children: ReactNode;
+}
+
+PriceTable.Container = function ({ children }: PriceTableContainerProps) {
+  return <div className="s-flex s-w-full s-gap-5">{children}</div>;
+};

sparkle/src/stories/PriceTable.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { Button, PriceTable } from "../index_with_tw_base";
+
+const meta = {
+  title: "Molecule/PriceTable",
+  component: PriceTable,
+} satisfies Meta<typeof PriceTable>;
+
+export default meta;
+
+export const Pricing = () => {
+  return (
+    <div className="s-h-full s-w-full">
+      <PriceTable.Container>
+        <PriceTable
+          title="Test"
+          price="0€"
+          priceLabel="/ month"
+          className="s-w-64"
+        >
+          <PriceTable.Item label="Single member / workspace" variant="dash" />
+          <PriceTable.Item label="Unlimited custom assistants" />
+          <PriceTable.Item label="Advanced LLM models (gpt4, Claude, ...)" />
+          <PriceTable.Item label="20 messages a week" variant="dash" />
+          <PriceTable.Item label="Static Data Sources (35Mo)" variant="dash" />
+          <PriceTable.Item label="Connected Data Sources" variant="xmark" />
+        </PriceTable>
+        <PriceTable
+          title="Business"
+          price="0€"
+          color="sky"
+          priceLabel="/ month / seat"
+          className="s-w-64"
+        >
+          <PriceTable.Item label="Unlimited members / workspace" />
+          <PriceTable.Item label="Unlimited custom assistants" />
+          <PriceTable.Item label="Advanced LLM models (gpt4, Claude, ...)" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.ActionContainer>
+            <Button size="sm" variant="primary" label="Select this plan" />
+          </PriceTable.ActionContainer>
+        </PriceTable>
+        <PriceTable
+          title="Enterprise"
+          price="Custom"
+          color="emerald"
+          className="s-w-64"
+        >
+          <PriceTable.Item label="Unlimited members / workspace" />
+          <PriceTable.Item label="Unlimited workspaces" />
+          <PriceTable.Item label="Unlimited custom assistants" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.ActionContainer>
+            <Button size="sm" variant="secondary" label="Contact us" />
+          </PriceTable.ActionContainer>
+        </PriceTable>
+      </PriceTable.Container>
+    </div>
+  );
+};