new ui

PunitSoniME · Jan 7, 2024 · 4808421 · 4808421
1 parent cb9eab6
commit 4808421
Show file tree

Hide file tree

Showing 72 changed files with 1,734 additions and 426 deletions.
diff --git a/example/components.json b/example/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
diff --git a/example/components/1-useToggle/ToggleComponent.tsx b/example/components/1-useToggle/ToggleComponent.tsx
diff --git a/example/components/2-useTimeout/TimeoutComponent.tsx b/example/components/2-useTimeout/TimeoutComponent.tsx
diff --git a/example/components/3-useDebounce/DebounceComponent.tsx b/example/components/3-useDebounce/DebounceComponent.tsx
diff --git a/example/components/5-useArray/ArrayComponent.tsx b/example/components/5-useArray/ArrayComponent.tsx
diff --git a/example/index.css b/example/index.css
@@ -1,94 +1,61 @@
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-.h-100vh {
-  height: 100vh;
-}
-
-.w-100 {
-  width: 100%;
-}
-
-.flex {
-  display: flex;
-}
-
-.main {
-  /* display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem; */
-  width: 90%;
-  margin: 2rem auto;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.flex-column {
-  flex-direction: column;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.items-start {
-  align-items: flex-start;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.gap-2 {
-  gap: 0.5rem;
-}
-
-.gap-3 {
-  gap: 1rem;
-}
-
-.card {
-  width: 100%;
-  border: 1px solid lightgray;
-  border-radius: 5px;
-}
-
-.card-header {
-  padding: 1rem;
-  background-color: lightgray;
-}
-
-.card-body {
-  padding: 1rem;
-}
-
-.mt-1 {
-  margin-top: 1rem;
-}
-
-.mt-2 {
-  margin-top: 1.5rem;
-}
-
-.mt-3 {
-  margin-top: 2rem;
-}
-
-.online {
-  height: 15px;
-  width: 15px;
-  background-color: rgb(67, 196, 67);
-  border-radius: 50%;
-}
-
-.offline {
-  height: 15px;
-  width: 15px;
-  background-color: rgba(219, 55, 55, 0.877);
-  border-radius: 50%;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+}
+
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/example/index.html b/example/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Playground</title>
+    <title>React Helper Hooks</title>
   </head>
 
   <body>