Skip to content

Commit 72ab35c

Browse files
édouard wautierédouard wautier
édouard wautier
authored and
édouard wautier
committed
New alpha Sparkle
1 parent 824529f commit 72ab35c

File tree

5 files changed

+222
-48
lines changed

5 files changed

+222
-48
lines changed

‎front/package-lock.json

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎front/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"initdb": "env $(cat .env.local) npx tsx admin/db.ts"
1414
},
1515
"dependencies": {
16-
"@dust-tt/sparkle": "0.2.24-epsilon",
16+
"@dust-tt/sparkle": "0.2.24-zeta",
1717
"@emoji-mart/data": "^1.1.2",
1818
"@emoji-mart/react": "^1.1.1",
1919
"@headlessui/react": "^1.7.7",

‎front/pages/index.tsx

Lines changed: 92 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -418,7 +418,7 @@ export default function Home({
418418
<div
419419
className={classNames(
420420
defaultFlexClasses,
421-
"s-dark dark col-span-8 flex flex-col gap-4"
421+
"s-dark dark col-span-12 flex flex-col gap-4"
422422
)}
423423
>
424424
<H2>Pricing</H2>
@@ -429,22 +429,41 @@ export default function Home({
429429
priceLabel=""
430430
color="emerald"
431431
>
432-
<PriceTable.Item label="One user" variant="dash" />
433-
<PriceTable.Item label="One workspace" variant="dash" />
434-
<PriceTable.Item label="Privacy and Data Security" />
435-
<PriceTable.Item label="Advanced LLM models (GPT-4, Claude, …)" />
436-
<PriceTable.Item label="Unlimited custom assistants" />
432+
<PriceTable.Item size="sm" label="One user" variant="dash" />
437433
<PriceTable.Item
434+
size="sm"
435+
label="One workspace"
436+
variant="dash"
437+
/>
438+
<PriceTable.Item
439+
size="sm"
440+
label="Privacy and Data Security"
441+
/>
442+
<PriceTable.Item
443+
size="sm"
444+
label="Advanced LLM models (GPT-4, Claude, …)"
445+
/>
446+
<PriceTable.Item
447+
size="sm"
448+
label="Unlimited custom assistants"
449+
/>
450+
<PriceTable.Item
451+
size="sm"
438452
label="100 messages with Assistants"
439453
variant="dash"
440454
/>
441455
<PriceTable.Item
456+
size="sm"
442457
label="50 documents as data sources"
443458
variant="dash"
444459
/>
445-
<PriceTable.Item label="No connections" variant="xmark" />
460+
<PriceTable.Item
461+
size="sm"
462+
label="No connections"
463+
variant="xmark"
464+
/>
446465
<PriceTable.ActionContainer>
447-
<Button variant="primary" label="Start testing" />
466+
<Button variant="primary" size="md" label="Start testing" />
448467
</PriceTable.ActionContainer>
449468
</PriceTable>
450469

@@ -454,48 +473,89 @@ export default function Home({
454473
color="sky"
455474
priceLabel="/ month / seat"
456475
>
457-
<PriceTable.Item label="From 1 user" />
458-
<PriceTable.Item label="One workspace" variant="dash" />
459-
<PriceTable.Item label="Privacy and Data Security" />
460-
<PriceTable.Item label="Advanced LLM models (GPT-4, Claude, …)" />
461-
<PriceTable.Item label="Unlimited custom assistants" />
462-
<PriceTable.Item label="Unlimited messages" />
463-
<PriceTable.Item label="Up to 1Go/user of data sources" />
476+
<PriceTable.Item size="sm" label="From 1 user" />
477+
<PriceTable.Item
478+
size="sm"
479+
label="One workspace"
480+
variant="dash"
481+
/>
482+
<PriceTable.Item
483+
size="sm"
484+
label="Privacy and Data Security"
485+
/>
486+
<PriceTable.Item
487+
size="sm"
488+
label="Advanced LLM models (GPT-4, Claude, …)"
489+
/>
490+
<PriceTable.Item
491+
size="sm"
492+
label="Unlimited custom assistants"
493+
/>
494+
<PriceTable.Item size="sm" label="Unlimited messages" />
495+
<PriceTable.Item
496+
size="sm"
497+
label="Up to 1Go/user of data sources"
498+
/>
464499
<PriceTable.Item
465500
label="Connections
466501
(GitHub, Google Drive, Notion, Slack)"
467502
/>
468-
<PriceTable.Item label="Single Sign-on (Google, GitHub)" />
469-
<PriceTable.Item label="Dust Slackbot" />
470-
<PriceTable.Item label="Assistants can execute actions" />
471503
<PriceTable.Item
504+
size="sm"
505+
label="Single Sign-on (Google, GitHub)"
506+
/>
507+
<PriceTable.Item size="sm" label="Dust Slackbot" />
508+
<PriceTable.Item
509+
size="sm"
510+
label="Assistants can execute actions"
511+
/>
512+
<PriceTable.Item
513+
size="sm"
472514
label="Workspace role and permissions"
473515
variant="dash"
474516
/>
475517
<PriceTable.ActionContainer>
476-
<Button variant="primary" label="Start now" />
518+
<Button variant="primary" size="md" label="Start now" />
477519
</PriceTable.ActionContainer>
478520
</PriceTable>
479521

480522
<PriceTable title="Enterprise" price="Custom">
481-
<PriceTable.Item label="From 100 users" />
482-
<PriceTable.Item label="Multiple workspaces" />
483-
<PriceTable.Item label="Privacy and Data Security" />
484-
<PriceTable.Item label="Advanced LLM models (GPT-4, Claude, …)" />
485-
<PriceTable.Item label="Unlimited custom assistants" />
486-
<PriceTable.Item label="Unlimited messages" />
487-
<PriceTable.Item label="Unlimited data sources" />
523+
<PriceTable.Item size="sm" label="From 100 users" />
524+
<PriceTable.Item size="sm" label="Multiple workspaces" />
525+
<PriceTable.Item
526+
size="sm"
527+
label="Privacy and Data Security"
528+
/>
529+
<PriceTable.Item
530+
size="sm"
531+
label="Advanced LLM models (GPT-4, Claude, …)"
532+
/>
533+
<PriceTable.Item
534+
size="sm"
535+
label="Unlimited custom assistants"
536+
/>
537+
<PriceTable.Item size="sm" label="Unlimited messages" />
538+
<PriceTable.Item size="sm" label="Unlimited data sources" />
488539
<PriceTable.Item
489540
label="Connections
490541
(GitHub, Google Drive, Notion, Slack)"
491542
/>
492-
<PriceTable.Item label="Single Sign-on" />
493-
<PriceTable.Item label="Dust Slackbot" />
494-
<PriceTable.Item label="Assistants can execute actions" />
495-
<PriceTable.Item label="Advanced workspace role and permissions" />
496-
<PriceTable.Item label="Dedicated account support" />
543+
<PriceTable.Item size="sm" label="Single Sign-on" />
544+
<PriceTable.Item size="sm" label="Dust Slackbot" />
545+
<PriceTable.Item
546+
size="sm"
547+
label="Assistants can execute actions"
548+
/>
549+
<PriceTable.Item
550+
size="sm"
551+
label="Advanced workspace role and permissions"
552+
/>
553+
<PriceTable.Item
554+
size="sm"
555+
label="Dedicated account support"
556+
/>
497557
<PriceTable.ActionContainer>
498-
<Button variant="secondary" label="Contact us" />
558+
<Button variant="secondary" size="md" label="Contact us" />
499559
</PriceTable.ActionContainer>
500560
</PriceTable>
501561
</PriceTable.Container>

‎sparkle/src/components/PriceTable.tsx

Lines changed: 64 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@ interface PriceTableProps {
1010
price: string;
1111
priceLabel?: string;
1212
color?: "pink" | "sky" | "emerald" | "amber" | "blue";
13+
size?: "xs" | "sm";
1314
className?: string;
1415
children: ReactNode;
16+
magnified?: boolean;
1517
}
1618

1719
const colorTable = {
@@ -22,6 +24,14 @@ const colorTable = {
2224
emerald: "s-bg-emerald-400 dark:s-bg-emerald-500",
2325
};
2426

27+
const bigColorTable = {
28+
pink: "s-bg-pink-400/60 dark:s-bg-pink-400/80 backdrop-blur-md",
29+
amber: "s-bg-amber-400/60 dark:s-bg-amber-400/80 backdrop-blur-md",
30+
sky: "s-bg-sky-400/60 dark:s-bg-sky-400/80 backdrop-blur-md",
31+
blue: "s-bg-blue-400/60 dark:s-bg-blue-400/80 backdrop-blur-md",
32+
emerald: "s-bg-emerald-400/60 dark:s-bg-emerald-400/80 backdrop-blur-md",
33+
};
34+
2535
const textColorTable = {
2636
pink: "s-text-pink-900 dark:s-text-pink-950",
2737
amber: "s-text-amber-900 dark:s-text-amber-950",
@@ -30,28 +40,58 @@ const textColorTable = {
3040
emerald: "s-text-emerald-900 dark:s-text-emerald-950",
3141
};
3242

43+
const sizeTable = {
44+
sm: "s-rounded-2xl s-p-1.5 s-shadow-2xl",
45+
xs: "s-rounded-xl s-p-1 s-shadow-xl",
46+
};
47+
3348
export function PriceTable({
3449
title,
3550
price,
3651
color = "pink",
52+
size = "xs",
3753
priceLabel = "",
3854
className = "",
55+
magnified = true,
3956
children, // Use children instead of tableItems
4057
}: PriceTableProps) {
58+
// Pass size prop to all PriceTable.Item children
59+
const childrenWithProps = React.Children.map(children, (child) => {
60+
// Checking isValidElement is the safe way and avoids a typescript error too
61+
if (React.isValidElement<PriceTableItemProps>(child)) {
62+
if (
63+
child.type === PriceTable.Item ||
64+
child.type === PriceTable.ActionContainer
65+
) {
66+
return React.cloneElement(child, { size: size });
67+
}
68+
}
69+
return child;
70+
});
71+
4172
return (
4273
<div
4374
className={classNames(
4475
"s-w-full",
45-
"s-flex s-cursor-default s-flex-col s-rounded-xl s-p-1 s-shadow-xl",
46-
"s-duration-400 s-scale-95 s-transition-all s-ease-out hover:s-scale-100",
47-
colorTable[color],
76+
"s-flex s-cursor-default s-flex-col s-border s-border-white/30",
77+
sizeTable[size],
78+
magnified
79+
? "s-duration-400 s-scale-95 s-transition-all s-ease-out hover:s-scale-100"
80+
: "",
81+
size === "xs" ? colorTable[color] : bigColorTable[color],
4882
className
4983
)}
5084
>
51-
<div className="s-flex s-flex-col s-px-3 s-py-2">
85+
<div
86+
className={classNames(
87+
"s-flex s-flex-col",
88+
size === "xs" ? "s-px-3 s-py-2" : "s-px-4 s-py-3"
89+
)}
90+
>
5291
<div
5392
className={classNames(
54-
"s-w-full s-text-right s-text-2xl s-font-semibold",
93+
size === "xs" ? "s-text-2xl" : "s-text-3xl",
94+
"s-w-full s-text-right s-font-semibold",
5595
"s-text-structure-0"
5696
)}
5797
>
@@ -60,24 +100,31 @@ export function PriceTable({
60100
<div className="-s-mt-2 s-flex s-flex-row s-items-baseline s-gap-2">
61101
<span
62102
className={classNames(
103+
size === "xs" ? "s-text-3xl" : "s-text-4xl",
63104
textColorTable[color],
64-
"s-text-3xl s-font-bold"
105+
"s-font-bold"
65106
)}
66107
>
67108
{price}
68109
</span>
69-
<span className="s-text-base s-font-bold s-text-white/70">
110+
<span
111+
className={classNames(
112+
"s-font-bold s-text-white/70",
113+
size === "xs" ? "s-text-base" : "s-text-lg"
114+
)}
115+
>
70116
{priceLabel}
71117
</span>
72118
</div>
73119
</div>
74120
<div
75121
className={classNames(
76-
"s-flex s-h-full s-flex-col s-overflow-hidden s-rounded-lg s-shadow-md",
122+
size === "xs" ? "s-rounded-lg" : "s-rounded-xl",
123+
"s-flex s-h-full s-flex-col s-overflow-hidden s-shadow-md",
77124
"s-bg-white dark:s-bg-structure-100-dark"
78125
)}
79126
>
80-
{children}
127+
{childrenWithProps}
81128
</div>
82129
</div>
83130
);
@@ -143,13 +190,20 @@ PriceTable.Item = function ({
143190

144191
interface PriceTableActionContainerProps {
145192
children: ReactNode;
193+
size?: "xs" | "sm";
146194
}
147195

148196
PriceTable.ActionContainer = function ({
149197
children,
198+
size = "xs",
150199
}: PriceTableActionContainerProps) {
151200
return (
152-
<div className="s-flex s-w-full s-flex-grow s-justify-center s-p-2">
201+
<div
202+
className={classNames(
203+
"s-flex s-w-full s-flex-grow s-justify-center s-px-2",
204+
size === "xs" ? "s-py-2" : "s-py-4"
205+
)}
206+
>
153207
<div className="s-flex s-h-full s-flex-col s-justify-end">{children}</div>
154208
</div>
155209
);

0 commit comments

Comments
 (0)