Skip to content

Commit a881240

Browse files
alantoaalantoa
committed
polish website
1 parent 07b65f0 commit a881240

25 files changed

+989
-2038
lines changed

‎docs/.babelrc

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
{
22
"presets": ["next/babel"],
33
"plugins": [
4-
["@babel/plugin-transform-modules-commonjs"],
5-
"@babel/plugin-proposal-do-expressions",
6-
"react-native-reanimated/plugin"
4+
["react-native-web", { "commonjs": true }],
5+
["react-native-reanimated/plugin", { "relativeSourceLocation": true }]
76
]
87
}

‎docs/next.config.mjs

Lines changed: 24 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,47 @@
1-
// import { log } from 'console';
2-
// import nextra from 'nextra';
3-
// import { dirname, join } from 'path';
4-
// import { fileURLToPath } from 'url';
1+
import nextra from 'nextra';
52

6-
// const withNextra = nextra({
7-
// theme: 'nextra-theme-docs',
8-
// themeConfig: './theme.config.tsx',
9-
// latex: true,
10-
// search: {
11-
// codeblocks: false,
12-
// },
13-
// });
3+
const withNextra = nextra({
4+
theme: 'nextra-theme-docs',
5+
themeConfig: './theme.config.tsx',
6+
latex: true,
7+
search: {
8+
codeblocks: false,
9+
},
10+
});
1411

15-
export default {
12+
/** @type {import('next').NextConfig} */
13+
const nextConfig = {
1614
transpilePackages: [
1715
'react-native-web',
1816
'react-native-awesome-slider',
1917
'react-native-gesture-handler',
2018
'react-native-reanimated',
2119
],
22-
webpack(config, options) {
23-
if (!config.resolve) {
24-
config.resolve = {};
25-
}
20+
webpack: (config, { webpack }) => {
21+
config.resolve = config.resolve || {};
22+
config.module = config.module || {};
23+
config.module.rules = config.module.rules || [];
2624

2725
config.resolve.alias = Object.assign(config.resolve.alias || {}, {
2826
'react-native$': 'react-native-web',
29-
'react-native/Libraries/EventEmitter/RCTDeviceEventEmitter$':
30-
'react-native-web/dist/vendor/react-native/NativeEventEmitter/RCTDeviceEventEmitter',
31-
'react-native/Libraries/vendor/emitter/EventEmitter$':
32-
'react-native-web/dist/vendor/react-native/emitter/EventEmitter',
33-
'react-native/Libraries/EventEmitter/NativeEventEmitter$':
34-
'react-native-web/dist/vendor/react-native/NativeEventEmitter',
3527
});
36-
config.plugins.push(
37-
new options.webpack.DefinePlugin({
38-
__DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
39-
})
40-
);
28+
4129
config.resolve.extensions = [
4230
'.web.js',
43-
'.web.jsx',
4431
'.web.ts',
4532
'.web.tsx',
4633
...(config.resolve.extensions || []),
4734
];
4835

49-
if (!config.plugins) {
50-
config.plugins = [];
51-
}
36+
config.plugins = config.plugins || [];
37+
config.plugins.push(
38+
new webpack.DefinePlugin({
39+
__DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
40+
})
41+
);
5242

5343
return config;
5444
},
5545
};
46+
47+
export default withNextra(nextConfig);

‎docs/package.json

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,28 @@
11
{
22
"name": "react-native-awesome-slider-docs",
33
"version": "0.1.0",
4-
"type": "module",
54
"private": true,
65
"scripts": {
76
"dev": "next dev",
87
"build": "next build",
98
"start": "next start"
109
},
1110
"dependencies": {
12-
"next": "^15.1.1",
11+
"framer-motion": "^11.15.0",
12+
"next": "^15.1.2",
1313
"nextra": "^3.2.5",
1414
"nextra-theme-docs": "^3.2.5",
1515
"react": "18.2.0",
1616
"react-dom": "18.2.0",
17-
"react-native-awesome-slider": "^2.6.6",
17+
"react-native-awesome-slider": "^2.7.1",
1818
"react-native-gesture-handler": "^2.21.2",
1919
"react-native-reanimated": "^3.16.1",
2020
"react-native-web": "^0.19.13"
2121
},
2222
"devDependencies": {
23-
"@babel/core": "^7.24.0",
24-
"@babel/plugin-proposal-do-expressions": "^7.24.0",
25-
"@babel/plugin-transform-modules-commonjs": "^7.24.0",
26-
"@babel/preset-env": "^7.24.0",
27-
"@babel/preset-react": "^7.24.0",
28-
"@expo/next-adapter": "^6.0.0",
29-
"babel-loader": "^9.1.3",
23+
"autoprefixer": "^10.4.20",
3024
"babel-plugin-react-native-web": "^0.19.10",
25+
"postcss": "^8.4.49",
3126
"tailwindcss": "^3.4.17"
3227
}
3328
}

‎docs/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

‎docs/src/components/index.tsx

Lines changed: 64 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,72 @@
11
'use client';
2-
import { Slider } from 'react-native-awesome-slider';
3-
import { useSharedValue } from 'react-native-reanimated';
4-
import { View } from 'react-native';
2+
import Link from 'next/link';
3+
import Head from 'next/head';
4+
import { Tabs } from './tabs';
5+
import { useState } from 'react';
6+
import { SliderExamples } from './slider/slider-examples';
7+
import { TABS, TabId } from './slider/tabs-config';
8+
9+
const title = 'React Native Awesome Slider';
10+
const description =
11+
'A versatile, responsive react native abd web Slider component.';
12+
513
export const IndexPage = () => {
6-
const progress = useSharedValue(30);
7-
const min = useSharedValue(0);
8-
const max = useSharedValue(100);
14+
const [activeTab, setActiveTab] = useState<TabId>(TABS[1].id);
915

1016
return (
11-
<div className="min-h-screen flex flex-col items-center justify-center relative overflow-hidden">
12-
<div className="absolute inset-0 bg-gradient-to-r from-orange-100 via-red-100 to-cyan-100">
13-
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
14-
</div>
15-
<View style={{ marginBottom: 100 }}>
16-
<Slider
17-
progress={progress}
18-
minimumValue={min}
19-
maximumValue={max}
20-
style={{
21-
width: 400,
22-
}}
17+
<>
18+
<Head>
19+
<title>{title}</title>
20+
<meta name="description" content={description} />
21+
<meta
22+
name="keywords"
23+
content="React Native, Slider, Reanimated, Gesture Handler"
2324
/>
24-
</View>
25-
<div className="relative z-10 text-center px-4">
26-
<h1 className="text-4xl md:text-6xl font-bold mb-6 text-gray-900">
27-
React Native Awesome Slider
28-
</h1>
29-
<p className="text-md md:text-xl text-gray-600 max-w-2xl mx-auto mb-8">
30-
A performant React Native slider built with Reanimated 2 and React
31-
Native Gesture Handler.
32-
</p>
33-
<a
34-
href="/docs"
35-
className="inline-flex items-center px-6 py-3 text-base font-medium text-white bg-black rounded-full hover:bg-gray-800 transition-colors"
36-
>
37-
Documentation
38-
</a>
25+
<meta property="og:title" content={title} />
26+
<meta property="og:description" content={description} />
27+
<meta property="og:type" content="website" />
28+
<meta name="twitter:card" content="summary_large_image" />
29+
<meta name="twitter:title" content={title} />
30+
<meta name="twitter:description" content={description} />
31+
</Head>
32+
<div className="flex flex-col items-center justify-center relative overflow-hidden min-h-screen bg-[#0A0A0A]">
33+
<div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff0f_1px,transparent_1px),linear-gradient(to_bottom,#ffffff0f_1px,transparent_1px)] bg-[size:24px_24px]" />
34+
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_10%,#0A0A0A_70%)]" />
35+
<div className="absolute inset-0 bg-gradient-to-b from-[#0A0A0A] via-transparent to-[#0A0A0A]" />
36+
<div className="absolute inset-0 bg-gradient-to-r from-[#0A0A0A] via-transparent to-[#0A0A0A]" />
37+
38+
<div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
39+
<h1 className="text-4xl md:text-6xl font-bold bg-gradient-to-r from-white via-gray-100 to-gray-300 bg-clip-text text-transparent mb-4">
40+
React Native Awesome Slider
41+
</h1>
42+
<p className="text-md md:text-lg text-gray-400 max-w-2xl mx-auto mb-12">
43+
{`A versatile, responsive <Slider /> component, interactive with it.`}
44+
</p>
45+
46+
<div className="w-full max-w-md mx-auto flex flex-col justify-center items-center min-h-[290px] mb-12 relative">
47+
<div className="absolute inset-0 bg-[#0A0A0A]/70 rounded-xl border border-[#222222] shadow-2xl overflow-hidden backdrop-blur-[2px]" />
48+
49+
<div className="relative w-full p-8">
50+
<div className="w-full max-w-md mb-6">
51+
<Tabs
52+
tabs={TABS}
53+
activeTab={activeTab}
54+
onChange={setActiveTab}
55+
/>
56+
</div>
57+
58+
<SliderExamples activeTab={activeTab} />
59+
</div>
60+
</div>
61+
62+
<Link
63+
href="/docs"
64+
className="inline-flex items-center px-6 py-3 text-base font-medium text-white bg-gradient-to-r from-gray-800 to-gray-900 rounded-full hover:from-gray-700 hover:to-gray-800 transition-all duration-200 shadow-[0_0_15px_rgba(255,255,255,0.1)] hover:shadow-[0_0_25px_rgba(255,255,255,0.2)]"
65+
>
66+
Documentation
67+
</Link>
68+
</div>
3969
</div>
40-
</div>
70+
</>
4171
);
4272
};

‎docs/src/components/slider/constants.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { TextStyle } from 'react-native';
2+
import { SliderThemeType } from 'react-native-awesome-slider';
3+
4+
export const COLORS = {
5+
backgroundColor: '#111111',
6+
inputBackgroundColor: '#1A1A1A',
7+
8+
borderColor: '#222222',
9+
markColor: '#FFFFFF',
10+
textColor: '#FFFFFF',
11+
descriptionColor: '#888888',
12+
13+
optionStyle: {
14+
flexDirection: 'row' as const,
15+
alignItems: 'center' as const,
16+
justifyContent: 'space-between' as const,
17+
marginBottom: 12,
18+
},
19+
20+
optionTextStyle: {
21+
fontSize: 14,
22+
fontWeight: '500',
23+
color: '#FFFFFF',
24+
} satisfies TextStyle,
25+
26+
sliderTheme: {
27+
maximumTrackTintColor: '#222222',
28+
minimumTrackTintColor: '#FFFFFF',
29+
30+
bubbleBackgroundColor: '#1A1A1A',
31+
bubbleTextColor: '#FFFFFF',
32+
} satisfies SliderThemeType,
33+
};

‎docs/src/components/slider/loading.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
'use client';
2+
import { motion } from 'framer-motion';
3+
4+
export const Loading = () => {
5+
return (
6+
<div className="flex items-center justify-center w-full h-[150px]">
7+
<motion.div
8+
className="w-full h-2 bg-[#222222] rounded-full overflow-hidden"
9+
initial={{ opacity: 0.5 }}
10+
animate={{ opacity: 1 }}
11+
transition={{ duration: 0.5, repeat: Infinity, repeatType: 'reverse' }}
12+
>
13+
<motion.div
14+
className="h-full bg-gray-400 rounded-full"
15+
initial={{ x: '-100%' }}
16+
animate={{ x: '100%' }}
17+
transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
18+
/>
19+
</motion.div>
20+
</div>
21+
);
22+
};

0 commit comments

Comments
 (0)