tailwind.config.ts/js config

Added tailwind.config.ts/js configuration for the dark-light mode of the components.
VisiUI · Sep 21, 2024 · 65804c7 · 65804c7
1 parent 52ed1f6
commit 65804c7
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 21 deletions.
diff --git a/app/Components/Sections/Accordition.tsx b/app/Components/Sections/Accordition.tsx
@@ -5,13 +5,13 @@ import { motion, AnimatePresence } from 'framer-motion'
 import { ChevronDown } from 'lucide-react'
 
 interface AccordionItem {
-  title: string
-  content: string
+    title: string
+    content: string
 }
 
 interface ModernAccordionProps {
-  items: AccordionItem[]
-  allowMultiple?: boolean
+    items: AccordionItem[]
+    allowMultiple?: boolean
 }
 
 export default function ModernAccordion({ items, allowMultiple = false }: ModernAccordionProps) {

diff --git a/content/docs/Components/Sections/accordition.mdx b/content/docs/Components/Sections/accordition.mdx
@@ -13,13 +13,13 @@ import { motion, AnimatePresence } from 'framer-motion'
 import { ChevronDown } from 'lucide-react'
 
 interface AccordionItem {
-    title: string
-    content: string
+  title: string
+  content: string
 }
 
 interface ModernAccordionProps {
-    items: AccordionItem[]
-    allowMultiple?: boolean
+  items: AccordionItem[]
+  allowMultiple?: boolean
 }
 
 export default function ModernAccordion({ items, allowMultiple = false }: ModernAccordionProps) {
@@ -38,19 +38,19 @@ export default function ModernAccordion({ items, allowMultiple = false }: Modern
   return (
     <div className="w-full max-w-2xl mx-auto space-y-2">
       {items.map((item, index) => (
-        <div key={index} className="border border-gray-200 rounded-lg overflow-hidden">
+        <div key={index} className="border-none rounded-lg overflow-hidden">
           <motion.button
-            className="w-full text-left p-4 flex justify-between items-center bg-white hover:bg-gray-50 transition-colors duration-200"
+            className="w-full text-left p-4 flex justify-between items-center bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
             onClick={() => toggleItem(index)}
             aria-expanded={openItems.includes(index)}
             aria-controls={\`accordion-content-\${index}\`}
           >
-            <span className="text-lg font-medium text-gray-900">{item.title}</span>
+            <span className="text-lg font-medium text-gray-900 dark:text-white">{item.title}</span>
             <motion.div
               animate={{ rotate: openItems.includes(index) ? 180 : 0 }}
               transition={{ duration: 0.3 }}
             >
-              <ChevronDown className="w-5 h-5 text-gray-500" />
+              <ChevronDown className="w-5 h-5 text-gray-500 dark:text-gray-400" />
             </motion.div>
           </motion.button>
           <AnimatePresence initial={false}>
@@ -62,7 +62,7 @@ export default function ModernAccordion({ items, allowMultiple = false }: Modern
                 exit={{ height: 0, opacity: 0 }}
                 transition={{ duration: 0.3, ease: 'easeInOut' }}
               >
-                <div className="p-4 bg-gray-50 text-gray-700">
+                <div className="p-4 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
                   {item.content}
                 </div>
               </motion.div>
@@ -128,6 +128,31 @@ export default function AccorditionData() {
 }
 ```
 
+`tailwind.config.ts`:
+```ts
+import type { Config } from "tailwindcss";
+
+// Code of the tailwind.config.ts...
+
+const config: Config = {
+  darkMode: "class",
+  // Rest...
+};
+
+```
+
+`tailwind.config.js`:
+```js
+// Rest of the code
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  // Rest...
+};
+
+```
+
 ### Usage Methods
 
 {/**Add the usage methods*/}
diff --git a/content/docs/Components/codewindow.mdx b/content/docs/Components/codewindow.mdx
@@ -16,9 +16,9 @@ import React, { useState } from 'react'
 import { FileIcon, Copy, Check } from 'lucide-react'
 
 interface CodeBoxProps {
-  code: string
-  fileName: string
-  fileExtension: string
+    code: string
+    fileName: string
+    fileExtension: string
 }
 
 export default function CodeBox({ code, fileName, fileExtension }: CodeBoxProps) {
@@ -51,15 +51,15 @@ export default function CodeBox({ code, fileName, fileExtension }: CodeBoxProps)
   }
 
   return (
-    <div className="bg-[#1e1e1e] rounded-lg overflow-hidden font-mono text-sm w-full max-w-2xl">
-      <div className="flex items-center justify-between px-4 py-2 bg-[#2a2a2a] text-[#8b8b8b] border-b border-[#3a3a3a]">
+    <div className="bg-white dark:bg-[#1e1e1e] rounded-lg overflow-hidden font-mono text-sm w-full max-w-2xl shadow-md">
+      <div className="flex items-center justify-between px-4 py-2 bg-gray-100 dark:bg-[#2a2a2a] text-gray-600 dark:text-[#8b8b8b] border-b border-gray-200 dark:border-[#3a3a3a]">
         <div className="flex items-center gap-2">
           <FileIcon className="w-4 h-4" aria-hidden="true" />
           <span>{fileName}.{fileExtension}</span>
         </div>
         <button
           onClick={copyToClipboard}
-          className="flex items-center gap-1 px-2 py-1 rounded hover:bg-[#3a3a3a] focus:outline-none focus:ring-2 focus:ring-[#4a4a4a] transition-colors"
+          className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-200 dark:hover:bg-[#3a3a3a] focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-[#4a4a4a] transition-colors"
           aria-label={isCopied ? "Copied" : "Copy code"}
         >
           {isCopied ? (
@@ -70,8 +70,8 @@ export default function CodeBox({ code, fileName, fileExtension }: CodeBoxProps)
           <span className="text-xs">{isCopied ? 'Copied!' : 'Copy'}</span>
         </button>
       </div>
-      <div className="p-4 bg-[#1e1e1e] overflow-x-auto">
-        <pre className={\`text-[#d4d4d4] \${getLanguageClass(fileExtension)}\`}>
+      <div className="p-4 bg-gray-50 dark:bg-[#1e1e1e] overflow-x-auto">
+        <pre className={\`text-gray-800 dark:text-[#d4d4d4] \${getLanguageClass(fileExtension)}\`}>
           <code>{code}</code>
         </pre>
       </div>
@@ -120,6 +120,31 @@ const exampleCode = ` ---
   }
 ```
 
+`tailwind.config.ts`:
+```ts
+import type { Config } from "tailwindcss";
+
+// Code of the tailwind.config.ts...
+
+const config: Config = {
+  darkMode: "class",
+  // Rest...
+};
+
+```
+
+`tailwind.config.js`:
+```js
+// Rest of the code
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  // Rest...
+};
+
+```
+
 ### Usage Methods
 
 1. **Props for customisation**: Add props to customise colours, font size, and other style options without having to modify the component.