fix: ui changes

gluestack · Jan 16, 2025 · 57061fd · 57061fd
1 parent 63f600d
commit 57061fd
Showing 1 changed file with 23 additions and 44 deletions.
diff --git a/example/storybook-nativewind/src/extra-components/nativewind/VadimStream.tsx b/example/storybook-nativewind/src/extra-components/nativewind/VadimStream.tsx
@@ -1,12 +1,6 @@
 'use client';
-import React from 'react';
-import { Box } from '@/components/ui/box/';
-import { Heading } from '@/components/ui/heading/';
-import { Text } from '@/components/ui/text/';
-import { VStack } from '@/components/ui/vstack/';
-import { HStack } from '@/components/ui/hstack/';
-import { Span } from '@expo/html-elements';
-import { useEffect } from 'react';
+import { Box } from '@/components/ui/box';
+import React, { useEffect } from 'react';
 
 declare global {
   interface Window {
@@ -76,42 +70,27 @@ const VadimStream = () => {
   }, []);
 
   return (
-    <Box className="gap-20">
-      <VStack className="max-w-[1024px] mt-[120px] gap-3">
-        <Heading className="text-3xl font-roboto font-bold sm:leading-[54px] leading-9 text-typography-900 sm:text-4xl">
-          Learn about gluestack from Youtube guru{' '}
-          <Span className="text-3xl font-roboto font-bold sm:leading-[54px] leading-9 text-info-600 sm:text-4xl">
-            notJust.dev
-          </Span>
-        </Heading>
-        <Text className="text-lg font-roboto font-normal leading-[30px] lg:w-[75%]">
-          Vadim, popularly known as "just-not-dev" on YouTube, offers insightful
-          and practical videos that explore a wide range of developer tools and
-          frameworks, including Gluestack-UI.
-        </Text>
-      </VStack>
-      <HStack className="relative flex-1 w-full h-full gap-5 flex-col md:flex-row">
-        <Box className="flex-1 border border-outline-200 rounded-lg overflow-hidden aspect-video">
-          <iframe
-            id="player1"
-            width="100%"
-            height="100%"
-            src="https://www.youtube.com/embed/FBXUPJ9_Xl0?enablejsapi=1"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowFullScreen
-          />
-        </Box>
-        <Box className="flex-1 border border-outline-200 rounded-lg overflow-hidden aspect-video">
-          <iframe
-            id="player2"
-            width="100%"
-            height="100%"
-            src="https://www.youtube.com/embed/9ErkOcDWJxI?enablejsapi=1"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowFullScreen
-          />
-        </Box>
-      </HStack>
+    <Box className="relative flex-1 w-full h-full gap-5 flex-col md:flex-row">
+      <Box className="flex-1 border border-outline-200 rounded-lg overflow-hidden aspect-video">
+        <iframe
+          id="player1"
+          width="100%"
+          height="100%"
+          src="https://www.youtube.com/embed/FBXUPJ9_Xl0?enablejsapi=1"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+      </Box>
+      <Box className="flex-1 border border-outline-200 rounded-lg overflow-hidden aspect-video">
+        <iframe
+          id="player2"
+          width="100%"
+          height="100%"
+          src="https://www.youtube.com/embed/9ErkOcDWJxI?enablejsapi=1"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+      </Box>
     </Box>
   );
 };