feat: add Alert component

themesberg · Mar 2, 2022 · d3cb7b7 · d3cb7b7
1 parent a2615be
commit d3cb7b7
Show file tree

Hide file tree

Showing 10 changed files with 524 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "@types/node": "^16.11.26",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
+    "@types/react-syntax-highlighter": "^13.5.2",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
     "autoprefixer": "^10.4.2",
@@ -62,7 +63,9 @@
     "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.2",
     "react-scripts": "^5.0.0",
+    "react-syntax-highlighter": "^15.4.5",
     "standard-version": "^9.3.2",
     "tailwindcss": "^3.0.23",
     "typescript": "^4.5.5"

diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" sizes="32x32" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/src/Dashboard.tsx b/src/Dashboard.tsx
@@ -1,6 +1,8 @@
 import { FC, useState } from 'react';
 import { DarkThemeToggle, Navbar, Sidebar, SidebarItem } from './components';
 import { ChartPieIcon, MenuAlt1Icon } from '@heroicons/react/solid';
+import { Route, Routes } from 'react-router-dom';
+import { Alerts } from './pages/Alerts';
 
 export const Dashboard: FC = () => {
   const [collapsed, setCollapsed] = useState(false);
@@ -12,44 +14,41 @@ export const Dashboard: FC = () => {
           <ChartPieIcon className="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" />
         ),
         title: 'Dashboard',
-        href: '#',
+        href: '/',
         label: '1',
       },
       {
-        dropdown: true,
+        dropdown: false,
         icon: (
           <ChartPieIcon className="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" />
         ),
-        title: 'Dropdown',
-        items: [
-          {
-            href: '#',
-            title: 'First item',
-          },
-          {
-            href: '#',
-            title: 'Second item',
-            label: '2',
-          },
-        ],
+        title: 'Alerts',
+        href: '/alerts',
       },
     ],
   ];
 
   return (
-    <div className="w-full h-screen overflow-hidden">
+    <div className="flex flex-col w-full h-screen overflow-hidden">
       <Navbar>
         <div className="flex items-center">
           <MenuAlt1Icon
             className="w-6 h-6 mr-6 cursor-pointer text-gray-600 dark:text-gray-400"
             onClick={() => setCollapsed(!collapsed)}
           />
-          <span className="dark:text-white">Flowbite React Components</span>
+          <span className="text-xl font-semibold dark:text-white">
+            Flowbite React Components
+          </span>
         </div>
         <DarkThemeToggle />
       </Navbar>
-      <div className="h-full overflow-hidden bg-gray-50 dark:bg-gray-900">
+      <div className="flex h-full overflow-hidden bg-gray-50 dark:bg-gray-900">
         <Sidebar collapsed={collapsed} itemsGroups={itemsGroups} />
+        <main className="flex-1 overflow-auto p-4">
+          <Routes>
+            <Route path="alerts" element={<Alerts />} />
+          </Routes>
+        </main>
       </div>
     </div>
   );

diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
@@ -0,0 +1,73 @@
+import { ComponentProps, FC, ReactNode } from 'react';
+import classNames from 'classnames';
+import { XIcon } from '@heroicons/react/solid';
+
+export type AlertProps = {
+  color?: 'blue' | 'red' | 'green' | 'yellow' | 'gray';
+  Icon?: FC<ComponentProps<'svg'>>;
+  rounded?: boolean;
+  withBorderAccent?: boolean;
+  additionalContent?: ReactNode;
+  onDismiss?: () => void;
+};
+
+export const Alert: FC<AlertProps> = ({
+  children,
+  color = 'blue',
+  Icon,
+  rounded = true,
+  withBorderAccent,
+  additionalContent,
+  onDismiss,
+}) => {
+  return (
+    <div
+      className={classNames('flex flex-col p-4 gap-2 text-sm', {
+        'rounded-lg': rounded,
+        'border-t-4': withBorderAccent,
+        'text-blue-700 bg-blue-100 border-blue-500 dark:bg-blue-200 dark:text-blue-800':
+          color === 'blue',
+        'text-red-700 bg-red-100 border-red-500 dark:bg-red-200 dark:text-red-800':
+          color === 'red',
+        'text-green-700 bg-green-100 border-green-500 dark:bg-green-200 dark:text-green-800':
+          color === 'green',
+        'text-yellow-700 bg-yellow-100 border-yellow-500 dark:bg-yellow-200 dark:text-yellow-800':
+          color === 'yellow',
+        'text-gray-700 bg-gray-100 border-gray-500 dark:bg-gray-700 dark:text-gray-300':
+          color === 'gray',
+      })}
+      role="alert"
+    >
+      <div className="flex items-center">
+        {Icon && <Icon className="inline flex-shrink-0 mr-3 h-5 w-5" />}
+        <div>{children}</div>
+        {onDismiss && (
+          <button
+            type="button"
+            className={classNames(
+              'ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8',
+              {
+                'bg-blue-100 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300':
+                  color === 'blue',
+                'bg-red-100 text-red-500 focus:ring-red-400 hover:bg-red-200 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300':
+                  color === 'red',
+                'bg-green-100 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300':
+                  color === 'green',
+                'bg-yellow-100 text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300':
+                  color === 'yellow',
+                'bg-gray-100 text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white':
+                  color === 'gray',
+              },
+            )}
+            aria-label="Close"
+            onClick={onDismiss}
+          >
+            <span className="sr-only">Close</span>
+            <XIcon className="w-5 h-5" />
+          </button>
+        )}
+      </div>
+      {additionalContent && <div>{additionalContent}</div>}
+    </div>
+  );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,3 +1,4 @@
+export * from './Alert';
 export * from './Navbar';
 export * from './Sidebar';
 export * from './DarkThemeToggle';
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,12 @@
-@tailwind base;
+@import "~flowbite";
+
 @tailwind components;
 @tailwind utilities;
+
+::-webkit-scrollbar {
+    @apply w-1 h-1 bg-gray-100 dark:bg-gray-900;
+}
+
+::-webkit-scrollbar-thumb {
+    @apply bg-gray-300 hover:bg-gray-400 dark:border-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600;
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,13 +1,13 @@
-import { StrictMode } from 'react';
 import { render } from 'react-dom';
 import { Dashboard } from './Dashboard';
+import { BrowserRouter } from 'react-router-dom';
 
 import './index.css';
 import 'flowbite';
 
 render(
-  <StrictMode>
+  <BrowserRouter>
     <Dashboard />
-  </StrictMode>,
+  </BrowserRouter>,
   document.getElementById('root'),
 );