docs: updates styles

dohooo · Oct 5, 2024 · c2eea6c · c2eea6c
1 parent ff3b32e
commit c2eea6c
Show file tree

Hide file tree

Showing 27 changed files with 39 additions and 46 deletions.
diff --git a/example/app/app/+html.tsx b/example/app/app/+html.tsx
@@ -1,5 +1,6 @@
 import { ScrollViewStyleReset } from "expo-router/html";
 import { WebProvider } from "@/store/WebProvider";
+import Head from "expo-router/head";
 
 // This file is web-only and used to configure the root HTML for every
 // web page during static rendering.
@@ -16,6 +17,10 @@ export default function Root({ children }: { children: React.ReactNode }) {
           content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
         />
 
+        <Head>
+          <title>Examples - RNRC</title>
+        </Head>
+
         {/*
           Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
           However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.

diff --git a/example/app/app/demos/custom-animations/quick-swipe/demo.tsx b/example/app/app/demos/custom-animations/quick-swipe/demo.tsx
@@ -4,13 +4,7 @@ import Carousel from "react-native-reanimated-carousel";
 
 import { SBItem } from "@/components/SBItem";
 import { window } from "@/constants/sizes";
-import {
-  Image,
-  ImageSourcePropType,
-  View,
-  ViewStyle,
-  useWindowDimensions,
-} from "react-native";
+import { Image, ImageSourcePropType, View, ViewStyle } from "react-native";
 import Animated, {
   Easing,
   Extrapolation,
@@ -26,7 +20,6 @@ import * as Haptics from "expo-haptics";
 import { getImages } from "./images";
 import { IS_WEB } from "@/constants/platform";
 
-const PAGE_WIDTH = window.width;
 const data = getImages().slice(0, 68);
 
 function Index() {
@@ -35,8 +28,8 @@ function Index() {
 
   const baseOptions = {
     vertical: false,
-    width: 480,
-    height: PAGE_WIDTH / 2,
+    width: window.width,
+    height: window.width / 2,
   } as const;
 
   return (

diff --git a/example/app/app/demos/custom-animations/quick-swipe/index.tsx b/example/app/app/demos/custom-animations/quick-swipe/index.tsx
@@ -5,12 +5,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 
 import { SBItem } from "@/components/SBItem";
 import { window } from "@/constants/sizes";
-import {
-  Image,
-  ImageSourcePropType,
-  ViewStyle,
-  useWindowDimensions,
-} from "react-native";
+import { Image, ImageSourcePropType, ViewStyle } from "react-native";
 import Animated, {
   Easing,
   Extrapolation,
@@ -27,18 +22,16 @@ import { getImages } from "./images";
 import { CaptureWrapper } from "@/store/CaptureProvider";
 import { IS_WEB } from "@/constants/platform";
 
-const PAGE_WIDTH = window.width;
 const data = getImages().slice(0, 68);
 
 function Index() {
-  const windowWidth = useWindowDimensions().width;
   const scrollOffsetValue = useSharedValue<number>(0);
   const ref = React.useRef<ICarouselInstance>(null);
 
   const baseOptions = {
     vertical: false,
-    width: windowWidth,
-    height: PAGE_WIDTH / 2,
+    width: window.width,
+    height: window.width / 2,
   } as const;
 
   return (
@@ -72,7 +65,7 @@ function Index() {
           renderItem={({ index, item }) => {
             return (
               <Animated.View key={index} style={{ flex: 1 }}>
-                <SBItem showIndex={false} img={item} />
+                <SBItem showIndex={false} img={item} index={index} />
               </Animated.View>
             );
           }}

diff --git a/example/app/components/SBItem.tsx b/example/app/components/SBItem.tsx
@@ -42,7 +42,7 @@ export const SBItem: React.FC<Props> = (props) => {
       }}
     >
       <Animated.View testID={testID} style={{ flex: 1 }} {...animatedViewProps}>
-        <SlideItem index={index} rounded={rounded} />
+        <SlideItem index={index} rounded={rounded} source={img} />
       </Animated.View>
     </LongPressGestureHandler>
   );

diff --git a/example/app/components/SlideItem.tsx b/example/app/components/SlideItem.tsx
@@ -7,6 +7,7 @@ import {
   StyleSheet,
   View,
   Text,
+  ImageSourcePropType,
 } from "react-native";
 import type { AnimatedProps } from "react-native-reanimated";
 import Animated from "react-native-reanimated";
@@ -15,6 +16,7 @@ interface Props extends AnimatedProps<ViewProps> {
   style?: StyleProp<ImageStyle>;
   index?: number;
   rounded?: boolean;
+  source?: ImageSourcePropType;
 }
 
 export const SlideItem: React.FC<Props> = (props) => {
@@ -27,8 +29,8 @@ export const SlideItem: React.FC<Props> = (props) => {
   } = props;
 
   const source = useMemo(
-    () => PURPLE_IMAGES[index % PURPLE_IMAGES.length],
-    [index],
+    () => props.source || PURPLE_IMAGES[index % PURPLE_IMAGES.length],
+    [index, props.source],
   );
 
   return (

diff --git a/example/website/pages/Examples/basic-layouts/left-align.mdx b/example/website/pages/Examples/basic-layouts/left-align.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `left-align` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/basic-layouts/left-align/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/basic-layouts/normal.mdx b/example/website/pages/Examples/basic-layouts/normal.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `normal` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/basic-layouts/normal/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/basic-layouts/parallax.mdx b/example/website/pages/Examples/basic-layouts/parallax.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `parallax` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/basic-layouts/parallax/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/basic-layouts/stack.mdx b/example/website/pages/Examples/basic-layouts/stack.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `stack` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/basic-layouts/stack/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/custom-animations/advanced-parallax.mdx b/example/website/pages/Examples/custom-animations/advanced-parallax.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `advanced-parallax` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/advanced-parallax/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/custom-animations/anim-tab-bar.mdx b/example/website/pages/Examples/custom-animations/anim-tab-bar.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `anim-tab-bar` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/anim-tab-bar/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/custom-animations/blur-parallax.mdx b/example/website/pages/Examples/custom-animations/blur-parallax.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `blur-parallax` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/blur-parallax/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/custom-animations/blur-rotate.mdx b/example/website/pages/Examples/custom-animations/blur-rotate.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `blur-rotate` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/blur-rotate/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/custom-animations/circular.mdx b/example/website/pages/Examples/custom-animations/circular.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `circular` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/circular/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/custom-animations/cube-3d.mdx b/example/website/pages/Examples/custom-animations/cube-3d.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `cube-3d` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/cube-3d/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/custom-animations/curve.mdx b/example/website/pages/Examples/custom-animations/curve.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `curve` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/curve/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/custom-animations/flow.mdx b/example/website/pages/Examples/custom-animations/flow.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `flow` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/flow/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/custom-animations/fold.mdx b/example/website/pages/Examples/custom-animations/fold.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `fold` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/fold/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/custom-animations/multiple.mdx b/example/website/pages/Examples/custom-animations/multiple.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `multiple` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/multiple/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/custom-animations/press-swipe.mdx b/example/website/pages/Examples/custom-animations/press-swipe.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `press-swipe` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/press-swipe/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/custom-animations/quick-swipe.mdx b/example/website/pages/Examples/custom-animations/quick-swipe.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `quick-swipe` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/quick-swipe/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/custom-animations/rotate-fade-in-out.mdx b/example/website/pages/Examples/custom-animations/rotate-fade-in-out.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `rotate-fade-in-out` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/rotate-fade-in-out/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/custom-animations/rotate-in-out.mdx b/example/website/pages/Examples/custom-animations/rotate-in-out.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `rotate-in-out` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/rotate-in-out/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/custom-animations/scale-fade-in-out.mdx b/example/website/pages/Examples/custom-animations/scale-fade-in-out.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `scale-fade-in-out` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/scale-fade-in-out/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/custom-animations/tinder.mdx b/example/website/pages/Examples/custom-animations/tinder.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `tinder` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/tinder/index.tsx)
 </Callout>
 

diff --git a/example/website/pages/Examples/utils/pagination.mdx b/example/website/pages/Examples/utils/pagination.mdx
@@ -38,7 +38,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the `pagination` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/utils/pagination/index.tsx)
 </Callout>
 

diff --git a/example/website/scripts/gen-pages-template.mjs b/example/website/scripts/gen-pages-template.mjs
@@ -42,7 +42,7 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import Demo from '@/components/Demo'
 
-<Callout emoji="👾">
+<Callout type="info" emoji="💡">
   Check out the \`${page}\` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/${kind}/${page}/index.tsx)
 </Callout>