FlowStar/components/streams/stream-templates.tsx at main · ghzhost/FlowStar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
'use client'

import { Briefcase, Lock, Gift, CreditCard } from 'lucide-react'

export interface StreamTemplate {
  id: string
  name: string
  description: string
  icon: React.ComponentType<{ className?: string }>
  durationSeconds: number
  cliffSeconds: number
  cliffPercent: number
  badge: string
}

export const STREAM_TEMPLATES: StreamTemplate[] = [
  {
    id: 'payroll',
    name: 'Payroll',
    description: 'Monthly salary streaming',
    icon: Briefcase,
    durationSeconds: 30 * 24 * 3600,
    cliffSeconds: 0,
    cliffPercent: 0,
    badge: '1 month',
  },
  {
    id: 'vesting',
    name: 'Token Vesting',
    description: 'Standard vesting schedule',
    icon: Lock,
    durationSeconds: 2 * 365 * 24 * 3600,
    cliffSeconds: 365 * 24 * 3600,
    cliffPercent: 25,
    badge: '2yr / 1yr cliff',
  },
  {
    id: 'grant',
    name: 'Grant / Sponsorship',
    description: 'Milestone-based grant',
    icon: Gift,
    durationSeconds: 90 * 24 * 3600,
    cliffSeconds: 30 * 24 * 3600,
    cliffPercent: 10,
    badge: '3 months',
  },
  {
    id: 'subscription',
    name: 'Subscription',
    description: 'Continuous subscription payment',
    icon: CreditCard,
    durationSeconds: 30 * 24 * 3600,
    cliffSeconds: 0,
    cliffPercent: 0,
    badge: '1 month',
  },
]

interface StreamTemplatesProps {
  onSelect: (template: StreamTemplate) => void
  selectedId?: string
}

export function StreamTemplates({ onSelect, selectedId }: StreamTemplatesProps) {
  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
        <h2 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
          Quick templates
        </h2>
        <span className="text-xs text-muted-foreground">Select one to pre-fill the form</span>
      </div>
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
        {STREAM_TEMPLATES.map((tpl) => {
          const Icon = tpl.icon
          const isSelected = selectedId === tpl.id
          return (
            <button
              key={tpl.id}
              type="button"
              onClick={() => onSelect(tpl)}
              aria-pressed={isSelected}
              className={
                'flex flex-col items-start gap-2 rounded-xl border p-3 text-left transition-all hover:border-primary hover:shadow-sm ' +
                (isSelected
                  ? 'border-primary bg-primary/5 shadow-sm'
                  : 'border-border bg-card')
              }
            >
              <div className={
                'flex size-8 items-center justify-center rounded-lg ' +
                (isSelected ? 'bg-primary/10 text-primary' : 'bg-secondary text-muted-foreground')
              }>
                <Icon className="size-4" />
              </div>
              <div className="min-w-0">
                <p className="text-xs font-semibold leading-tight">{tpl.name}</p>
                <p className="mt-0.5 text-xs text-muted-foreground leading-tight">{tpl.description}</p>
              </div>
              <span className={
                'rounded-full px-2 py-0.5 text-xs font-medium ' +
                (isSelected
                  ? 'bg-primary/10 text-primary'
                  : 'bg-secondary text-muted-foreground')
              }>
                {tpl.badge}
              </span>
            </button>
          )
        })}
      </div>
    </div>
  )
}