fix: demo styles

pstachula-dev · Jul 7, 2024 · c58153b · c58153b
1 parent 8cbd884
commit c58153b
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,14 @@
 {
   "name": "react-simple-headless-carousel",
   "private": false,
-  "version": "0.0.8",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pstachula-dev/simple-headless-carousel.git"
+  },
+  "author": "Paweł Stachula",
+  "license": "MIT",
+  "homepage": "https://simple-headless-carousel.onrender.com/",
+  "version": "0.0.9",
   "sideEffects": false,
   "description": "React simple headless carousel",
   "type": "module",
@@ -15,7 +22,7 @@
     "lint": "eslint . --ext ts,tsx",
     "build:lib": "vite build -c vite.lib.config.ts",
     "build:css": "NODE_ENV=production tailwindcss -o dist/styles.min.css -m",
-    "npm:lib": "npm run build:lib && npm run build:css"
+    "build:npm": "npm run build:lib && LIB_MODE=lib npm run build:css"
   },
   "files": [
     "/dist"

diff --git a/src/App.tsx b/src/App.tsx
@@ -15,38 +15,42 @@ function Box({ index }: { index: number }) {
 
 function App() {
   return (
-    <div className="mx-auto mt-10 justify-center">
-      <CarouselProvider
-        autoPlayDelay={2000}
-        width={500}
-        autoPlay={false}
-        slidesVisible={1}
-        infinite
-        step={1}
-        total={4}
-      >
-        <Carousel>
-          <Slide>
-            <Box index={0} />
-          </Slide>
-          <Slide>
-            <Box index={1} />
-          </Slide>
-          <Slide>
-            <Box index={2} />
-          </Slide>
-          <Slide>
-            <Box index={3} />
-          </Slide>
-        </Carousel>
+    <div className="h-dvh w-full bg-gray-700">
+      <div className="mx-auto max-w-3xl pt-10">
+        <CarouselProvider
+          autoPlayDelay={2000}
+          width={500}
+          autoPlay={false}
+          slidesVisible={1}
+          infinite
+          step={1}
+          total={4}
+        >
+          <Carousel>
+            <Slide>
+              <Box index={0} />
+            </Slide>
+            <Slide>
+              <Box index={1} />
+            </Slide>
+            <Slide>
+              <Box index={2} />
+            </Slide>
+            <Slide>
+              <Box index={3} />
+            </Slide>
+          </Carousel>
 
-        <div className="mt-4 flex justify-center">
-          <DotsGroup />
-        </div>
+          <div className="my-4">
+            <DotsGroup />
+          </div>
 
-        <PrevButton />
-        <NextButton />
-      </CarouselProvider>
+          <div className="mx-4 flex gap-4">
+            <PrevButton />
+            <NextButton />
+          </div>
+        </CarouselProvider>
+      </div>
     </div>
   );
 }

diff --git a/src/lib/simple-headless-carousel/components/Carousel.tsx b/src/lib/simple-headless-carousel/components/Carousel.tsx
@@ -157,7 +157,7 @@ export const Carousel = memo(
       <div
         style={{ width }}
         className={clsx(
-          'z-10 cursor-pointer overflow-hidden',
+          'relative z-10 cursor-pointer overflow-hidden',
           wrapperClassName,
         )}
       >

diff --git a/src/lib/simple-headless-carousel/components/DotsGroup.tsx b/src/lib/simple-headless-carousel/components/DotsGroup.tsx
@@ -19,7 +19,7 @@ export const DotsGroup = memo(({ className }: DotsGroupProps) => {
   const dotsLength = total / slidesVisible;
 
   return (
-    <div className={clsx('flex justify-center space-x-2', className)}>
+    <div className={clsx('flex space-x-2', className)}>
       {Array.from({ length: dotsLength }).map((_, idx) => (
         <Dot key={id + idx} index={idx * slidesVisible} />
       ))}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,7 +5,7 @@ export default {
     extend: {},
   },
   corePlugins: {
-    preflight: process.env.NODE_ENV === 'production' ? false : true,
+    preflight: process.env.LIB_MODE !== 'lib',
   },
   plugins: [],
 };