voltra/example/widgets/ios/IosGreetingWidget.tsx at 639363e57455675c2b8eec7c438118d91ce803b4 · callstackincubator/voltra · 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
import { Voltra } from 'voltra'

export type GreetingName = 'friend' | 'world' | 'team' | 'there'
export type GreetingTheme = 'purple' | 'ocean' | 'sunset'

export interface GreetingWidgetProps {
  name?: GreetingName
  theme?: GreetingTheme
  showEmoji?: boolean
}

const NAME_LABELS: Record<GreetingName, string> = {
  friend: 'Friend',
  world: 'World',
  team: 'Team',
  there: 'There',
}

const THEME_GRADIENTS: Record<GreetingTheme, { colors: string[]; start: { x: number; y: number }; end: { x: number; y: number } }> = {
  purple: {
    colors: ['#6B21A8', '#8232FF', '#A78BFA'],
    start: { x: 0, y: 0 },
    end: { x: 1, y: 1 },
  },
  ocean: {
    colors: ['#0C4A6E', '#0284C7', '#38BDF8'],
    start: { x: 0, y: 0 },
    end: { x: 1, y: 1 },
  },
  sunset: {
    colors: ['#7C2D12', '#EA580C', '#FBBF24'],
    start: { x: 0, y: 0 },
    end: { x: 1, y: 1 },
  },
}

const THEME_EMOJIS: Record<GreetingTheme, string> = {
  purple: '✨',
  ocean: '🌊',
  sunset: '🌅',
}

export const IosGreetingWidget = ({
  name = 'friend',
  theme = 'purple',
  showEmoji = true,
}: GreetingWidgetProps) => {
  const gradient = THEME_GRADIENTS[theme]
  const emoji = THEME_EMOJIS[theme]
  const label = NAME_LABELS[name]

  return (
    <Voltra.LinearGradient colors={gradient.colors} start={gradient.start} end={gradient.end} style={{ flex: 1 }}>
      <Voltra.VStack style={{ flex: 1, padding: 16, justifyContent: 'center' }}>
        {showEmoji ? (
          <Voltra.Text style={{ fontSize: 36, marginBottom: 8 }}>{emoji}</Voltra.Text>
        ) : null}
        <Voltra.Text
          style={{
            fontSize: 14,
            fontWeight: '500',
            color: 'rgba(255,255,255,0.8)',
            letterSpacing: 1,
            textTransform: 'uppercase',
          }}
        >
          Hello,
        </Voltra.Text>
        <Voltra.Text
          style={{
            fontSize: 28,
            fontWeight: '700',
            color: '#FFFFFF',
            shadowColor: '#000000',
            shadowOpacity: 0.25,
            shadowRadius: 4,
            shadowOffset: { width: 0, height: 2 },
          }}
        >
          {label}!
        </Voltra.Text>
      </Voltra.VStack>
    </Voltra.LinearGradient>
  )
}