-
Notifications
You must be signed in to change notification settings - Fork 2
feat: Initial Frontend Implementation 🚀 #1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
b00ee05
2ecc079
0902611
436f921
4e5f880
1006380
783dcda
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| module.exports = { | ||
| plugins: { | ||
| '@tailwindcss/postcss': {}, | ||
| autoprefixer: {}, | ||
| }, | ||
| }; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,23 @@ | ||
| #root { | ||
| max-width: 1280px; | ||
| margin: 0 auto; | ||
| padding: 2rem; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .logo { | ||
| height: 6em; | ||
| padding: 1.5em; | ||
| will-change: filter; | ||
| transition: filter 300ms; | ||
| } | ||
| .logo:hover { | ||
| filter: drop-shadow(0 0 2em #646cffaa); | ||
| } | ||
| .logo.react:hover { | ||
| filter: drop-shadow(0 0 2em #61dafbaa); | ||
| } | ||
| @import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); | ||
|
|
||
| @keyframes logo-spin { | ||
| from { | ||
| transform: rotate(0deg); | ||
| } | ||
| to { | ||
| transform: rotate(360deg); | ||
| } | ||
| body { | ||
| font-family: 'Poppins'; | ||
| margin: 0; | ||
| padding: 0; | ||
| background-color: #f5f5f5; | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion: no-preference) { | ||
| a:nth-of-type(2) .logo { | ||
| animation: logo-spin infinite 20s linear; | ||
| } | ||
| ::-webkit-scrollbar{ | ||
| display: none; | ||
| } | ||
|
|
||
| .card { | ||
| padding: 2em; | ||
| /* Hide scrollbar for Chrome, Safari, and Opera */ | ||
| .scrollbar-hide::-webkit-scrollbar { | ||
| display: none; | ||
| } | ||
|
|
||
| .read-the-docs { | ||
| color: #888; | ||
| } | ||
| /* Hide scrollbar for IE, Edge, and Firefox */ | ||
| .scrollbar-hide { | ||
| -ms-overflow-style: none; /* IE and Edge */ | ||
| scrollbar-width: none; /* Firefox */ | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,44 @@ | ||
| import './App.css' | ||
| import React, { useState } from 'react'; | ||
| import Navbar from './components/Navbar'; | ||
| import Dashboard from './components/Dashboard'; | ||
| import CheckLog from './components/CheckLog'; | ||
| import ChartLine from './components/ChartLine'; | ||
| import LogOut from './components/LogOut'; | ||
| import Collab from './components/Collab'; | ||
| import './App.css'; | ||
|
|
||
| function App() { | ||
| const [activeTab, setActiveTab] = useState('dashboard'); | ||
|
|
||
| const renderContent = () => { | ||
| switch (activeTab) { | ||
| case 'dashboard': | ||
| return <Dashboard />; | ||
| case 'checkLog': | ||
| return <CheckLog />; | ||
| case 'chartLine': | ||
| return <ChartLine />; | ||
| case 'logOut': | ||
| return <LogOut />; | ||
| default: | ||
| return <Dashboard />; | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <h1>Log Analyzer Frontend</h1> | ||
| </> | ||
| ) | ||
| <div className="flex"> | ||
| <div className="fixed top-0 left-0 h-full w-30 p-5 bg-gradient-to-b from-gray-100 via-gray-200 to-gray-300"> | ||
| <Navbar activeTab={activeTab} setActiveTab={setActiveTab} vertical /> | ||
| </div> | ||
| <div className="ml-30 mr-80 w-full p-5 bg-gradient-to-b from-gray-100 via-gray-200 to-gray-300 h-screen overflow-y-auto scrollbar-hide"> | ||
| {renderContent()} | ||
| </div> | ||
|
|
||
| <div className='fixed top-0 right-0 h-full w-80 p-5 bg-gradient-to-t from-gray-100 via-gray-200 to-gray-300'> | ||
| <Collab /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default App | ||
| export default App; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import user1 from './user1.png' | ||
| import user2 from './user2.png' | ||
| import user3 from './user3.png' | ||
| import user4 from './user4.png' | ||
| import user5 from './user5.png' | ||
|
|
||
| export const assets = { | ||
| user1, | ||
| user2, | ||
| user3, | ||
| user4, | ||
| user5 | ||
| } |
|
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is not required. Please remove it. |
|
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is not required. Please remove it. |
|
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is not required. Please remove it. |
|
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is not required. Please remove it. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is not required. Please remove it.