diff --git a/example/src/app.tsx b/example/src/app.tsx
index fb3e4ff..b9b673f 100644
--- a/example/src/app.tsx
+++ b/example/src/app.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { CSSProperties } from 'react'
import useResponsiveValue from 'use-responsivevalue'
import { Controls } from './controls'
@@ -9,10 +9,13 @@ function App() {
'(min-width: 480px) 3, (min-width: 720px) 4, (min-width: 1024px) 6, 2',
)
- const itemStyles = {
+ const itemStyles: CSSProperties = {
height: 'auto',
width: '100%',
display: 'block',
+ borderRight: '1px solid red',
+ borderLeft: '1px solid red',
+ boxSizing: 'border-box',
}
return (
@@ -20,57 +23,57 @@ function App() {
diff --git a/example/src/controls.tsx b/example/src/controls.tsx
index b809206..c7e1e39 100644
--- a/example/src/controls.tsx
+++ b/example/src/controls.tsx
@@ -1,4 +1,54 @@
-import React from 'react'
+import React, { CSSProperties } from 'react'
+
+const paginationStyles: CSSProperties = {
+ width: '100%',
+ display: 'flex',
+ flexWrap: 'wrap',
+ justifyContent: 'center',
+}
+
+const dotStyles: CSSProperties = {
+ flex: 'none',
+ height: 24,
+ width: 24,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+}
+
+const dotInnerStyles: CSSProperties = {
+ width: 16,
+ height: 16,
+ border: '2px solid black',
+ borderRadius: '50%',
+}
+
+const buttonStyles: CSSProperties = {
+ padding: 0,
+ border: 'none',
+ background: 'none',
+ WebkitAppearance: 'none',
+ appearance: 'none',
+}
+
+const prevStyles: CSSProperties = {
+ position: 'absolute',
+ display: 'flex',
+ alignContent: 'center',
+ top: 0,
+ bottom: 0,
+}
+
+const nextStyles: CSSProperties = { ...prevStyles, right: 0 }
+
+const arrowStyles: CSSProperties = {
+ width: 0,
+ height: 0,
+ fontSize: 0,
+ display: 'block',
+ borderTop: '20px solid transparent',
+ borderBottom: '20px solid transparent',
+}
function Controls(props: {
total: number
@@ -11,44 +61,21 @@ function Controls(props: {
return (
-