Feat: Add PricingCard component #3221 (#3634)

### What problem does this PR solve?

Feat: Add PricingCard component #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/ui/badge.tsx

@@ -15,6 +15,8 @@ const badgeVariants = cva(
         destructive:
           'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
         outline: 'text-foreground',
+        tertiary:
+          'border-transparent bg-colors-text-core-standard text-foreground hover:bg-colors-text-core-standard/80',
       },
     },
     defaultVariants: {

web/src/components/ui/button.tsx

@@ -13,11 +13,13 @@ const buttonVariants = cva(
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
-          'border border-colors-outline-sentiment-primary bg-background hover:bg-accent hover:text-accent-foreground',
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
+        tertiary:
+          'bg-colors-text-core-standard text-foreground hover:bg-colors-text-core-standard/80',
       },
       size: {
         default: 'h-10 px-4 py-2',

web/src/pages/home/datasets.tsx

@@ -76,7 +76,7 @@ export function Datasets() {
             </CardContent>
           </Card>
         ))}
-        <Button className="bg-[#9276ff] h-auto" variant={'secondary'}>
+        <Button className="h-auto " variant={'tertiary'}>
           See all
         </Button>
       </div>

web/src/pages/profile-setting/plan/index.tsx

@@ -1,3 +1,121 @@
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Segmented, SegmentedValue } from '@/components/ui/segmented ';
+import { CircleCheckBig, LogOut } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { PricingCard } from './pricing-card';
+
+const pricingData = [
+  {
+    title: 'Free',
+    price: '$0',
+    description: 'Meh, just looking',
+    features: [
+      { name: 'Project', value: '1 project' },
+      { name: 'Storage', value: '1 Gb' },
+      { name: 'Team', value: '2 members' },
+      { name: 'Features', value: 'Basic features' },
+    ],
+    buttonText: 'Current plan',
+    buttonVariant: 'outline' as const,
+  },
+  {
+    title: 'Pro',
+    price: '$16.00',
+    description: 'For professional use.',
+    features: [
+      { name: 'Project', value: 'Unlimited projects' },
+      { name: 'Storage', value: '100 Gb' },
+      { name: 'Team', value: 'Unlimited members' },
+      { name: 'Features', value: 'Basic features All advanced features' },
+    ],
+    buttonText: 'Upgrade',
+    buttonVariant: 'default' as const,
+    isPro: true,
+  },
+  {
+    title: 'Enterprise',
+    price: 'Customed',
+    description:
+      'Get full capabilities and support for large-scale mission-critical systems.',
+    features: [
+      { name: 'Project', value: 'Unlimited projects' },
+      { name: 'Storage', value: '100 Gb' },
+      { name: 'Team', value: 'Unlimited members' },
+      { name: 'Features', value: 'Basic features All advanced features' },
+    ],
+    buttonText: 'Contact us',
+    buttonVariant: 'secondary' as const,
+    isEnterprise: true,
+  },
+];
+
 export default function Plan() {
-  return <div>plan</div>;
+  const [val, setVal] = useState('monthly');
+  const options = useMemo(() => {
+    return [
+      {
+        label: 'Monthly',
+        value: 'monthly',
+      },
+      {
+        label: 'Yearly',
+        value: 'yearly',
+      },
+    ];
+  }, []);
+
+  const handleChange = (path: SegmentedValue) => {
+    setVal(path as string);
+  };
+
+  const list = [
+    'Full access to pro features',
+    'Exclusive analyze models',
+    'Create more teams',
+    'Invite more collaborators',
+  ];
+
+  return (
+    <section className="p-8">
+      <h1 className="text-3xl font-bold mb-6">Plan & balance</h1>
+      <Card className="border-0 p-6 mb-6 bg-colors-background-inverse-weak divide-y divide-colors-outline-neutral-strong">
+        <div className="pb-2 flex justify-between text-xl">
+          <span className="font-bold ">Balance</span>
+          <span className="font-medium">$ 100.00</span>
+        </div>
+        <div className="flex items-center justify-between pt-3">
+          <span>The value equals to 1,000 tokens or 10.00 GBs of storage</span>
+          <Button variant={'tertiary'} size={'sm'}>
+            <LogOut />
+            Recharge
+          </Button>
+        </div>
+      </Card>
+      <Card className="pt-6 bg-colors-background-inverse-weak">
+        <CardContent className="space-y-4">
+          <div className="font-bold text-xl">Upgrade to access</div>
+          <section className="grid grid-cols-2 gap-3">
+            {list.map((x, idx) => (
+              <div key={idx} className="flex items-center gap-2">
+                <CircleCheckBig className="size-4" />
+                <span>{x}</span>
+              </div>
+            ))}
+          </section>
+          <Segmented
+            options={options}
+            value={val}
+            onChange={handleChange}
+            className="bg-colors-background-inverse-standard inline-flex"
+          ></Segmented>
+          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+            {pricingData.map((plan, index) => (
+              <PricingCard key={index} {...plan} />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </section>
+  );
 }

web/src/pages/profile-setting/plan/pricing-card.tsx

@@ -0,0 +1,90 @@
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import { Mail, Zap } from 'lucide-react';
+
+interface PricingFeature {
+  name: string;
+  value: string;
+  tooltip?: string;
+}
+
+interface PricingCardProps {
+  title: string;
+  price: string;
+  description: string;
+  features: PricingFeature[];
+  buttonText: string;
+  buttonVariant?: 'default' | 'outline' | 'secondary';
+  badge?: string;
+  isPro?: boolean;
+  isEnterprise?: boolean;
+}
+
+export function PricingCard({
+  title,
+  price,
+  description,
+  features,
+  buttonText,
+  isPro,
+  isEnterprise,
+}: PricingCardProps) {
+  const isFree = title === 'Free';
+
+  return (
+    <Card className="flex flex-col bg-colors-background-neutral-weak divide-y divide-colors-outline-neutral-strong p-4">
+      <CardHeader className=" justify-between p-0 pb-3 h-52">
+        <section>
+          <div className="flex items-center justify-between mb-2">
+            <Badge
+              variant={isFree ? 'secondary' : 'tertiary'}
+              className="text-xs"
+            >
+              {isPro && <Zap className="mr-2 h-4 w-4" />}
+              {isEnterprise && <Mail className="mr-2 h-4 w-4" />}
+              {title}
+            </Badge>
+          </div>
+          <p className="text-sm text-colors-text-neutral-standard">
+            {description}
+          </p>
+        </section>
+        <section>
+          <div className="flex items-baseline text-3xl font-bold pb-3">
+            {price}
+            {price !== 'Customed' && (
+              <span className="text-sm font-normal">/mo</span>
+            )}
+          </div>
+          <Button
+            variant={isFree ? 'secondary' : 'tertiary'}
+            className={cn('w-full', {
+              'bg-colors-text-core-standard': !isFree,
+            })}
+            size={'sm'}
+          >
+            {isPro && <Zap className="mr-2 h-4 w-4" />}
+            {isEnterprise && <Mail />}
+            {buttonText}
+          </Button>
+        </section>
+      </CardHeader>
+      <CardContent className=" p-0 pt-3">
+        <ul className="space-y-2">
+          {features.map((feature, index) => (
+            <li key={index} className="">
+              <div className="text-colors-text-core-standard">
+                {feature.name}
+              </div>
+              <span className="text-sm">
+                <span className="font-medium">{feature.value}</span>
+              </span>
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  );
+}

web/tailwind.config.js

@@ -28,8 +28,11 @@ module.exports = {
 
         'colors-outline-sentiment-primary':
           'var(--colors-outline-sentiment-primary)',
+        'colors-outline-neutral-strong': 'var(--colors-outline-neutral-strong)',
 
         'colors-text-core-standard': 'var(--colors-text-core-standard)',
+        'colors-text-neutral-strong': 'var(--colors-text-neutral-strong)',
+        'colors-text-neutral-standard': 'var(--colors-text-neutral-standard)',
 
         primary: {
           DEFAULT: 'hsl(var(--primary))',

web/tailwind.css

@@ -41,8 +41,11 @@
     --button-blue-text: rgb(22, 119, 255);
 
     --colors-outline-sentiment-primary: rgba(127, 105, 255, 1);
+    --colors-outline-neutral-strong: rgba(112, 107, 107, 0.15);
 
     --colors-text-core-standard: rgba(127, 105, 255, 1);
+    --colors-text-neutral-strong: rgb(130, 121, 121);
+    --colors-text-neutral-standard: rgba(230, 227, 246, 1);
   }
 
   .dark {
@@ -114,8 +117,11 @@
     --colors-background-neutral-weak: rgba(17, 16, 23, 1);
 
     --colors-outline-sentiment-primary: rgba(146, 118, 255, 1);
+    --colors-outline-neutral-strong: rgba(255, 255, 255, 0.15);
 
     --colors-text-core-standard: rgba(137, 126, 255, 1);
+    --colors-text-neutral-strong: rgba(255, 255, 255, 1);
+    --colors-text-neutral-standard: rgba(230, 227, 246, 1);
   }
 }