jfs-components 0.1.2 → 0.1.8

package/src/components/PdpCcCard/PdpCcCard.tsx

@@ -0,0 +1,356 @@
+import React, { useMemo } from 'react'
+import {
+    View,
+    Text,
+    Pressable,
+    StyleSheet,
+    type ViewStyle,
+    type TextStyle,
+    type StyleProp,
+    type ImageSourcePropType,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Title from '../Title/Title'
+import Divider from '../Divider/Divider'
+import Button from '../Button/Button'
+import Image from '../Image/Image'
+import Icon from '../Icon/Icon'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * A single metric column inside the card's stats row: a small title, a bold
+ * value and an optional muted caption.
+ */
+export interface PdpCcCardMetric {
+    /** Small label rendered above the value (e.g. `"Weight"`). */
+    title?: string
+    /** The prominent value (e.g. `"24K"`). */
+    value?: string
+    /** Optional muted caption rendered below the value. */
+    caption?: string
+}
+
+export interface PdpCcCardProps {
+    /**
+     * Image source for the default media slot. Accepts a URL string or any RN
+     * `ImageSourcePropType`. Ignored when `media` is provided.
+     */
+    imageSource?: ImageSourcePropType | string
+    /** Default media image width. Defaults to the Figma spec (`100`). */
+    imageWidth?: number
+    /** Default media image height. Defaults to the Figma spec (`60`). */
+    imageHeight?: number
+    /**
+     * Full override for the media slot (top of the card). Takes precedence over
+     * `imageSource`. `modes` cascade into it automatically.
+     */
+    media?: React.ReactNode
+    /** Headline title (26px black). */
+    title?: string
+    /** Subtitle rendered below the title (14px medium). */
+    subtitle?: string
+    /**
+     * The metric columns rendered in the stats row. Vertical dividers are
+     * inserted automatically between adjacent metrics. Defaults to two sample
+     * metrics.
+     */
+    metrics?: PdpCcCardMetric[]
+    /** CTA button label. Defaults to `"button"`. */
+    buttonLabel?: string
+    /**
+     * Registry icon name for the button's leading glyph. Defaults to
+     * `'ic_add_circle'`. Pass `null` to hide the leading icon.
+     */
+    buttonIcon?: string | null
+    /** CTA press handler. */
+    onButtonPress?: () => void
+    /** Full override for the CTA. Takes precedence over `buttonLabel`. */
+    button?: React.ReactNode
+    /** Toggles the CTA button. Defaults to `true`. */
+    showButton?: boolean
+    /** Press handler for the whole card. When set, the card becomes pressable. */
+    onPress?: () => void
+    /** Card width. Defaults to the Figma spec (`344`). Pass `'100%'` to fill the parent. */
+    width?: number | `${number}%`
+    /** Modes object for design-token resolution. Cascaded to all children. */
+    modes?: Modes
+    /** Style overrides for the card container. */
+    style?: StyleProp<ViewStyle>
+    /** Accessibility label for the card. */
+    accessibilityLabel?: string
+}
+
+/**
+ * PdpCcCard — Figma node 5352:935 ("PDP cc card").
+ *
+ * A centered white product/PDP card composed from the shared design-system
+ * primitives so it stays in sync with the rest of the library:
+ *
+ *  - **Media** — a top image slot (`Image`, rounded via `image/radius`). Pass
+ *    `imageSource` for the default image or `media` for a full slot override.
+ *  - **Title** — a centered headline + subtitle rendered through the shared
+ *    {@link Title} component (`title/*`, `pageSubtitle/*` tokens).
+ *  - **Metrics** — a row of {@link PdpCcCardMetric} columns (title / value /
+ *    caption) separated by vertical `Divider`s (`metricdata/*` tokens).
+ *  - **CTA** — a small tonal {@link Button} (`Button / Size: S`,
+ *    `AppearanceBrand: Secondary`, `Emphasis: Medium`) with a leading icon.
+ *
+ * All defaults can be overridden via `modes`.
+ */
+function PdpCcCard({
+    imageSource,
+    imageWidth = 100,
+    imageHeight = 60,
+    media,
+    title = 'Title',
+    subtitle = 'Subtitle',
+    metrics = DEFAULT_METRICS,
+    buttonLabel = 'button',
+    buttonIcon = 'ic_add_circle',
+    onButtonPress,
+    button,
+    showButton = true,
+    onPress,
+    width = 344,
+    modes = EMPTY_MODES,
+    style,
+    accessibilityLabel,
+}: PdpCcCardProps) {
+    const tokens = useMemo(() => resolveTokens(modes), [modes])
+
+    // The CTA uses the brand "Secondary" appearance at "Medium" emphasis (lilac
+    // fill + purple label) and the small size — matching the design. A
+    // consumer-supplied `modes` value still wins via spread order.
+    const ctaModes = useMemo<Modes>(
+        () => ({ AppearanceBrand: 'Secondary', Emphasis: 'Medium', 'Button / Size': 'S', ...modes }),
+        [modes]
+    )
+
+    const buttonForeground = useMemo(
+        () => asStr(getVariableByName('button/foreground', ctaModes), '#5d00b5'),
+        [ctaModes]
+    )
+
+    const mediaNode = media ? (
+        cloneChildrenWithModes(media, modes)
+    ) : (
+        <Image
+            imageSource={imageSource}
+            width={imageWidth}
+            height={imageHeight}
+            borderRadius={tokens.imageRadius}
+            resizeMode="cover"
+            accessibilityElementsHidden
+            importantForAccessibility="no"
+        />
+    )
+
+    const ctaNode = button ? (
+        cloneChildrenWithModes(button, ctaModes)
+    ) : (
+        <Button
+            label={buttonLabel}
+            modes={ctaModes}
+            onPress={onButtonPress}
+            leading={
+                buttonIcon ? (
+                    <Icon iconName={buttonIcon} size={tokens.buttonIconSize} color={buttonForeground} />
+                ) : undefined
+            }
+        />
+    )
+
+    const content = (
+        <>
+            <View style={styles.mediaSlot}>{mediaNode}</View>
+
+            <Title title={title} subtitle={subtitle} textAlign="Center" modes={modes} />
+
+            {metrics.length > 0 ? (
+                <View style={styles.metricsRow}>
+                    {metrics.map((metric, index) => (
+                        <React.Fragment key={index}>
+                            {index > 0 ? (
+                                <Divider direction="vertical" modes={modes} style={styles.metricDivider} />
+                            ) : null}
+                            <Metricdata metric={metric} tokens={tokens} />
+                        </React.Fragment>
+                    ))}
+                </View>
+            ) : null}
+
+            {showButton ? ctaNode : null}
+        </>
+    )
+
+    const containerStyle = useMemo<ViewStyle>(
+        () => ({ ...tokens.container, width }),
+        [tokens.container, width]
+    )
+
+    if (onPress) {
+        return (
+            <Pressable
+                style={({ pressed }) => [containerStyle, pressed ? styles.pressed : null, style]}
+                accessibilityRole="button"
+                accessibilityLabel={accessibilityLabel ?? title}
+                onPress={onPress}
+            >
+                {content}
+            </Pressable>
+        )
+    }
+
+    return (
+        <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+            {content}
+        </View>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Metricdata — internal metric column (Figma node 5352:256)
+// ---------------------------------------------------------------------------
+
+function Metricdata({ metric, tokens }: { metric: PdpCcCardMetric; tokens: ResolvedTokens }) {
+    return (
+        <View style={tokens.metric}>
+            {metric.title != null ? <Text style={tokens.metricTitle}>{metric.title}</Text> : null}
+            {metric.value != null ? <Text style={tokens.metricValue}>{metric.value}</Text> : null}
+            {metric.caption != null ? <Text style={tokens.metricCaption}>{metric.caption}</Text> : null}
+        </View>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+interface ResolvedTokens {
+    container: ViewStyle
+    imageRadius: number
+    buttonIconSize: number
+    metric: ViewStyle
+    metricTitle: TextStyle
+    metricValue: TextStyle
+    metricCaption: TextStyle
+}
+
+function asNum(raw: unknown, fallback: number): number {
+    const n = typeof raw === 'number' ? raw : parseFloat(raw as string)
+    return Number.isFinite(n) ? n : fallback
+}
+
+function asStr(raw: unknown, fallback: string): string {
+    return raw != null ? String(raw) : fallback
+}
+
+function resolveTokens(modes: Modes): ResolvedTokens {
+    // NOTE: token names are passed as string literals DIRECTLY to
+    // getVariableByName so the `extract-component-tokens` script can statically
+    // collect them for the generated docs. Do not refactor these into a helper
+    // that receives the name as a variable.
+    const background = asStr(getVariableByName('PDPcccard/bg/color', modes), '#ffffff')
+    const paddingHorizontal = asNum(getVariableByName('PDPcccard/padding/horizontal', modes), 16)
+    const paddingVertical = asNum(getVariableByName('PDPcccard/padding/vertical', modes), 20)
+    const gap = asNum(getVariableByName('PDPcccard/gap', modes), 12)
+
+    const imageRadius = asNum(getVariableByName('image/radius', modes), 8)
+    const buttonIconSize = asNum(getVariableByName('button/iconSize', modes), 16)
+
+    const metricGap = asNum(getVariableByName('metricdata/gap', modes), 4)
+    const metricPadH = asNum(getVariableByName('metricdata/padding/horizontal', modes), 10)
+    const metricPadV = asNum(getVariableByName('metricdata/padding/vertical', modes), 10)
+
+    const titleColor = asStr(getVariableByName('metricdata/title/color', modes), '#000000')
+    const titleSize = asNum(getVariableByName('metricdata/title/fontsize', modes), 12)
+    const titleFamily = asStr(getVariableByName('metricdata/title/fontfamily', modes), 'JioType Var')
+    const titleWeight = asStr(getVariableByName('metricdata/title/fontweight', modes), '400')
+
+    const valueColor = asStr(getVariableByName('metricdata/value/color', modes), '#000000')
+    const valueSize = asNum(getVariableByName('metricdata/value/fontsize', modes), 20)
+    const valueFamily = asStr(getVariableByName('metricdata/value/fontfamily', modes), 'JioType Var')
+    const valueWeight = asStr(getVariableByName('metricdata/value/fontweight', modes), '700')
+
+    const captionColor = asStr(getVariableByName('metricdata/caption/color', modes), '#777777')
+    const captionSize = asNum(getVariableByName('metricdata/caption/fontsize', modes), 12)
+    const captionFamily = asStr(getVariableByName('metricdata/caption/fontfamily', modes), 'JioType Var')
+    const captionWeight = asStr(getVariableByName('metricdata/caption/fontweight', modes), '500')
+
+    return {
+        container: {
+            backgroundColor: background,
+            paddingHorizontal,
+            paddingVertical,
+            gap,
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        imageRadius,
+        buttonIconSize,
+        metric: {
+            flex: 1,
+            gap: metricGap,
+            paddingHorizontal: metricPadH,
+            paddingVertical: metricPadV,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        metricTitle: {
+            color: titleColor,
+            fontSize: titleSize,
+            fontFamily: titleFamily,
+            fontWeight: titleWeight as TextStyle['fontWeight'],
+            lineHeight: Math.round(titleSize * 1.2),
+            textAlign: 'center',
+            includeFontPadding: false as any,
+        },
+        metricValue: {
+            color: valueColor,
+            fontSize: valueSize,
+            fontFamily: valueFamily,
+            fontWeight: valueWeight as TextStyle['fontWeight'],
+            lineHeight: Math.round(valueSize * 1.2),
+            textAlign: 'center',
+            includeFontPadding: false as any,
+        },
+        metricCaption: {
+            color: captionColor,
+            fontSize: captionSize,
+            fontFamily: captionFamily,
+            fontWeight: captionWeight as TextStyle['fontWeight'],
+            lineHeight: Math.round(captionSize * 1.2),
+            textAlign: 'center',
+            includeFontPadding: false as any,
+        },
+    }
+}
+
+const DEFAULT_METRICS: PdpCcCardMetric[] = [
+    { title: 'Title', value: 'Value', caption: 'caption' },
+    { title: 'Title', value: 'Value', caption: 'caption' },
+]
+
+const styles = StyleSheet.create({
+    mediaSlot: {
+        alignSelf: 'stretch',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    metricsRow: {
+        alignSelf: 'stretch',
+        flexDirection: 'row',
+        alignItems: 'stretch',
+    },
+    metricDivider: {
+        alignSelf: 'center',
+        height: '70%',
+    },
+    pressed: {
+        opacity: 0.92,
+    },
+})
+
+export default PdpCcCard

package/src/components/ProductMerchandisingCard/GlassFill.tsx

@@ -0,0 +1,276 @@
+import React, { useId } from 'react'
+import { View, StyleSheet, Platform, UIManager, type ViewStyle, type StyleProp } from 'react-native'
+import { BlurView } from '@react-native-community/blur'
+import MaskedView from '@react-native-masked-view/masked-view'
+import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg'
+
+export type GlassTint = 'dark' | 'light'
+
+export interface GlassFillProps {
+    /**
+     * Visual tint of the glass surface. Maps to `BlurView`'s `blurType`
+     * (`'dark'` | `'light'`) and drives the iOS
+     * `reducedTransparencyFallbackColor` so the surface degrades gracefully
+     * when "Reduce Transparency" is enabled in system accessibility settings.
+     */
+    tint?: GlassTint
+    /**
+     * Blur strength as a 0–100 "intensity" value. Internally mapped to
+     * `@react-native-community/blur`'s `blurAmount`. When `progressive` is set,
+     * this is the strength at the BOTTOM of the ramp (the strongest point); the
+     * ramp is kept intentionally gentle so the surface reads as subtle glass
+     * rather than a heavy frosted block.
+     */
+    intensity?: number
+    /**
+     * Token-derived color tint laid OVER the live blur. Painted as a
+     * translucent overlay so the glass keeps its color signature even when the
+     * platform blur quality varies (or realtime blur is unavailable).
+     */
+    overlayColor?: string
+    /**
+     * Render a *progressive* (variable) blur instead of a uniform one: fully
+     * clear at the top, easing into a soft blur toward the bottom. Implemented
+     * by stacking two `MaskedView` + `BlurView` layers (a faint base + a
+     * slightly stronger accent near the bottom), each revealed via an eased
+     * multi-stop SVG gradient mask so the blur swells smoothly rather than
+     * along a hard seam. Works on iOS and Android with no extra native module.
+     */
+    progressive?: boolean
+    /** Container style overrides. Defaults to `StyleSheet.absoluteFill`. */
+    style?: StyleProp<ViewStyle>
+}
+
+const DEFAULT_FALLBACK_DARK = '#1414174a'
+const DEFAULT_FALLBACK_LIGHT = '#ffffff66'
+
+// The native view-manager name registered by `@react-native-community/blur`
+// (`AndroidBlurView` on Android, `BlurView` on iOS).
+const NATIVE_BLUR_NAME = Platform.OS === 'android' ? 'AndroidBlurView' : 'BlurView'
+
+/**
+ * Alpha stop on a layer's vertical reveal mask. `offset` is the vertical
+ * position (0 = top of the surface, 1 = bottom); `opacity` is the mask alpha
+ * there (0 = layer hidden / fully clear, 1 = layer fully applied).
+ *
+ * Using several stops (rather than a single linear 0 → 1 ramp) lets each layer
+ * EASE in, so the blur swells smoothly toward the bottom instead of appearing
+ * along a hard horizontal seam. That soft S-curve is what gives the surface its
+ * "glass" feel rather than a flat translucent panel.
+ */
+interface MaskStop {
+    offset: number
+    opacity: number
+}
+
+/**
+ * A single layer of the progressive ramp.
+ *  - `stops` describe how this layer is revealed from top to bottom.
+ *  - `amount` is this layer's share (0–1) of the max `blurAmount`.
+ *
+ * We stack just TWO layers on both platforms: a faint base blur that covers
+ * most of the footer and a slightly stronger accent concentrated near the
+ * bottom. Keeping the overlap shallow avoids compounding the dark tint of
+ * multiple `BlurView`s (which is what made the earlier 3-layer ramp read as a
+ * heavy block), while still giving a genuine variable-radius result — the blur
+ * radius grows toward the bottom where the two layers overlap.
+ */
+interface ProgressiveLayer {
+    stops: MaskStop[]
+    amount: number
+}
+
+// Base reveal: a faint trace of blur begins near the very top and grows
+// steadily downward, so the upper half still carries visible glass rather than
+// snapping clear. Also reused for the no-native-blur fallback scrim.
+const BASE_MASK_STOPS: MaskStop[] = [
+    { offset: 0.0, opacity: 0 },
+    { offset: 0.08, opacity: 0.12 },
+    { offset: 0.35, opacity: 0.4 },
+    { offset: 0.65, opacity: 0.8 },
+    { offset: 1.0, opacity: 1 },
+]
+
+const PROGRESSIVE_LAYERS: ProgressiveLayer[] = [
+    { amount: 0.65, stops: BASE_MASK_STOPS },
+    // Accent: the strongest blur, gathering over the lower portion for depth.
+    {
+        amount: 1.0,
+        stops: [
+            { offset: 0.0, opacity: 0 },
+            { offset: 0.3, opacity: 0.15 },
+            { offset: 0.65, opacity: 0.65 },
+            { offset: 1.0, opacity: 1 },
+        ],
+    },
+]
+
+/**
+ * Probe ONCE whether the native blur view is actually present in this binary.
+ *
+ * `@react-native-community/blur` is a peer dependency so its JS always imports,
+ * but on a build where the native module was never linked (e.g. `pod install`
+ * wasn't run on iOS) rendering `<BlurView>` shows React Native's red
+ * "Unimplemented component <BlurView>" placeholder. Detecting availability up
+ * front lets us fall back to a tinted scrim instead of crashing the surface.
+ *
+ *   - New architecture (bridgeless): `getViewManagerConfig` raises a soft error,
+ *     so we MUST use `hasViewManagerConfig` -> Fabric component registry.
+ *   - Old architecture (Paper): `getViewManagerConfig` returns null when the
+ *     view manager isn't registered.
+ */
+const NATIVE_BLUR_SUPPORTED: boolean = (() => {
+    try {
+        const um = UIManager as unknown as {
+            hasViewManagerConfig?: (name: string) => boolean
+            getViewManagerConfig?: (name: string) => unknown
+        }
+        if (typeof um.hasViewManagerConfig === 'function') {
+            return um.hasViewManagerConfig(NATIVE_BLUR_NAME) === true
+        }
+        if (typeof um.getViewManagerConfig === 'function') {
+            return um.getViewManagerConfig(NATIVE_BLUR_NAME) != null
+        }
+    } catch {
+        // Any probe failure -> treat blur as unavailable and use the fallback.
+    }
+    return false
+})()
+
+/**
+ * Vertical alpha-gradient mask drawn with `react-native-svg`. `MaskedView`
+ * reveals its child in proportion to this mask's alpha, so feeding it an eased
+ * multi-stop gradient makes the layer's blur swell in smoothly from top to
+ * bottom instead of along a hard seam.
+ */
+function GradientMask({ id, stops }: { id: string; stops: MaskStop[] }) {
+    return (
+        <Svg width="100%" height="100%">
+            <Defs>
+                <LinearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+                    {stops.map((s, i) => (
+                        <Stop key={i} offset={s.offset} stopColor="#000000" stopOpacity={s.opacity} />
+                    ))}
+                </LinearGradient>
+            </Defs>
+            <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${id})`} />
+        </Svg>
+    )
+}
+
+/**
+ * Glass / frosted surface for native (iOS + Android).
+ *
+ * Why this lives in its own platform-split file (mirrors `MediaCard/GlassFill`):
+ *   - `@react-native-community/blur` is a native-only module; importing it on
+ *     web throws because it references native components not registered there.
+ *     Metro's platform-extension resolution picks `GlassFill.tsx` for native
+ *     and `GlassFill.web.tsx` for web, keeping the web bundle native-free.
+ *   - Centralizes the `intensity` (0–100) -> `blurAmount` (0–32) mapping so the
+ *     Figma `blur/minimal` token semantics survive across platforms.
+ *
+ * On iOS (with the pod installed) this is a real `UIVisualEffectView` (true
+ * OS-level live blur). On Android it uses the community blur view. When the
+ * native module isn't linked in the running binary, the component degrades to
+ * a translucent tinted scrim (`reducedTransparencyFallbackColor` / fallback
+ * color) instead of rendering the "Unimplemented component" placeholder.
+ */
+function GlassFill({
+    tint = 'dark',
+    intensity = 50,
+    overlayColor,
+    progressive = false,
+    style,
+}: GlassFillProps) {
+    const rawId = useId()
+    const maskId = `glass-mask-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`
+
+    const blurType: 'light' | 'dark' = tint === 'light' ? 'light' : 'dark'
+    const uniformBlurAmount = Math.max(0, Math.min(32, Math.round(intensity * 0.32)))
+    const fallbackColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK)
+
+    // ----- Progressive (variable) blur -------------------------------------
+    if (progressive) {
+        // Peak blur radius (at the bottom). Full strength so the frosted glass
+        // is clearly engaged where the layers overlap, while the eased masks
+        // keep the top of the surface fully clear.
+        const peakBlur = Math.max(1, Math.min(32, Math.round(intensity * 0.32)))
+
+        // Native blur not linked -> tint eases from transparent (top) to a soft
+        // fallback color (bottom) so the surface still reads as gentle glass.
+        if (!NATIVE_BLUR_SUPPORTED) {
+            return (
+                <View style={[StyleSheet.absoluteFill, style]} pointerEvents="none">
+                    <MaskedView
+                        style={StyleSheet.absoluteFill}
+                        maskElement={<GradientMask id={`${maskId}-fb`} stops={BASE_MASK_STOPS} />}
+                    >
+                        <View style={[StyleSheet.absoluteFill, { backgroundColor: fallbackColor }]} />
+                    </MaskedView>
+                </View>
+            )
+        }
+
+        return (
+            <View style={[StyleSheet.absoluteFill, style]} pointerEvents="none">
+                {PROGRESSIVE_LAYERS.map((layer, i) => {
+                    const amount = Math.max(1, Math.round(peakBlur * layer.amount))
+                    return (
+                        <MaskedView
+                            key={i}
+                            style={StyleSheet.absoluteFill}
+                            maskElement={<GradientMask id={`${maskId}-${i}`} stops={layer.stops} />}
+                        >
+                            <BlurView
+                                style={StyleSheet.absoluteFill}
+                                blurType={blurType}
+                                blurAmount={amount}
+                                reducedTransparencyFallbackColor={fallbackColor}
+                            />
+                        </MaskedView>
+                    )
+                })}
+            </View>
+        )
+    }
+
+    // ----- Uniform blur (default) ------------------------------------------
+    // Native blur not linked in this build -> render a translucent tinted scrim
+    // so the surface still reads as frosted glass and never shows RN's
+    // "Unimplemented component <BlurView>" box.
+    if (!NATIVE_BLUR_SUPPORTED) {
+        return (
+            <View
+                style={[StyleSheet.absoluteFill, { backgroundColor: fallbackColor }, style]}
+                pointerEvents="none"
+            />
+        )
+    }
+
+    return (
+        <View style={[StyleSheet.absoluteFill, style]} pointerEvents="none">
+            <BlurView
+                style={StyleSheet.absoluteFill}
+                blurType={blurType}
+                blurAmount={uniformBlurAmount}
+                reducedTransparencyFallbackColor={fallbackColor}
+            />
+            {overlayColor != null ? (
+                <View style={[StyleSheet.absoluteFill, { backgroundColor: overlayColor }]} />
+            ) : null}
+            {Platform.OS === 'android' ? (
+                <View
+                    style={[
+                        StyleSheet.absoluteFill,
+                        {
+                            backgroundColor: 'rgba(255,255,255,0.03)',
+                            opacity: 0.6,
+                        },
+                    ]}
+                />
+            ) : null}
+        </View>
+    )
+}
+
+export default GlassFill