Skip to content

Commit

Permalink
adding new code on dashboard,
Browse files Browse the repository at this point in the history 
added left side bar components
  • Loading branch information
@MOHAMMED-IQRAMUL
MOHAMMED-IQRAMUL committed Oct 2, 2024
1 parent 393886e commit f2300f4
Show file tree
Hide file tree
Showing 4 changed files with 1,139 additions and 109 deletions.
107 changes: 100 additions & 7 deletions app/components/LeftSideBar.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,104 @@
import React from 'react'
import React from "react";
import { ResizableBox } from "react-resizable";
import ContentIcon from "@mui/icons-material/Share";
import DiscussionsIcon from "@mui/icons-material/Forum";
import InquireIcon from "@mui/icons-material/HelpOutline";
import LearningIcon from "@mui/icons-material/School";
import SupportIcon from "@mui/icons-material/SupportAgent";
import SeasonIcon from "@mui/icons-material/CalendarToday";
import ProfilesIcon from "@mui/icons-material/Person";
import WeatherIcon from "@mui/icons-material/WbSunny";
import Aboutus from "@mui/icons-material/Info";
import Contactus from "@mui/icons-material/ContactMail";
import FAQIcon from "@mui/icons-material/QuestionAnswer";
import PrivacyIcon from "@mui/icons-material/PrivacyTip";
import TermsIcon from "@mui/icons-material/Gavel";


const LeftSideBar = () => {

const NavItems = [
{ name: "Content Sharing", url: "/ContentSharing", icon: ContentIcon },
{ name: "Discussions", url: "/Discussions", icon: DiscussionsIcon },
{ name: "Inquire About Crops", url: "/InquireAboutCrops", icon: InquireIcon },
{ name: "Learning And Resources", url: "/LearningAndResources", icon: LearningIcon },
{ name: "Personal AI Support Bot", url: "/PersonalAiSupportBot", icon: SupportIcon },
{ name: "Season Dashboard", url: "/SeasonDashboard", icon: SeasonIcon },
{ name: "User Profiles", url: "/UserProfiles", icon: ProfilesIcon },
{ name: "Weather Dashboard", url: "/WeatherDashboard", icon: WeatherIcon }
];
const NavItemsExt = [
{ name: "About US", url: "/aboutus", icon: Aboutus },
{ name: "Contact US", url: "/contactus", icon: Contactus },
{ name: "FAQ", url: "/faq", icon: FAQIcon },
{ name: "Privacy and Policy", url: "/privacy", icon: PrivacyIcon },
{ name: "Terms and Services", url: "/terms", icon: TermsIcon }
];





return (
<div>

</div>
)
}
<ResizableBox
width={300}
height={Infinity}
minConstraints={[100, Infinity]}
maxConstraints={[600, Infinity]}
axis="x"
resizeHandles={["e"]}
className="overflow-auto w-[30%] min-w-[10%] border-r-2 border-gray-200"
>
<div className=" pl-5 m-0 left w-full h-full">


<h1 className="text-2xl text-center py-2 font-semibold text-gray-800">Menu</h1>

{/* <ul className="space-y-4">
{NavItems.map((item, index) => (
<li key={index} className="flex items-center space-x-2 hover:text-gray-900">
<item.icon className="w-6 h-6 text-gray-500 hover:text-gray-900" />
<a href={item.url} className="text-lg font-medium text-gray-500 hover:text-gray-900">
{item.name}
</a>
</li>
))}
<hr className="my-4" />
{NavItemsExt.map((item, index) => (
<li key={index} className="flex items-center space-x-2 hover:text-gray-900">
<item.icon className="w-6 h-6 text-gray-500 hover:text-gray-900" />
<a href={item.url} className="text-lg font-medium text-gray-500 hover:text-gray-900">
{item.name}
</a>
</li>
))}
</ul> */}

<h2 className="text-2xl font-bold mb-4">Navigation</h2>
<ul>
{NavItems.map((item) => (
<li key={item.name} className="mb-2">
<a href={item.url} className="flex items-center text-blue-500 hover:underline">
<item.icon className="h-5 w-5 mr-2" />
{item.name}
</a>
</li>
))}
</ul>
<h2 className="text-2xl font-bold mt-8 mb-4">External Links</h2>
<ul>
{NavItemsExt.map((item) => (
<li key={item.name} className="mb-2">
<a href={item.url} className="flex items-center text-blue-500 hover:underline">
<item.icon className="h-5 w-5 mr-2" />
{item.name}
</a>
</li>
))}
</ul>
</div>
</ResizableBox>
);
};

export default LeftSideBar
export default LeftSideBar;
192 changes: 114 additions & 78 deletions app/dashboard/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,125 @@
"use client"
"use client";


import { useState } from 'react';
import { SunIcon, CloudIcon, UserIcon, ChatIcon, BookOpenIcon } from '@heroicons/react/outline';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';
import {
SunIcon,
CloudIcon,
UserIcon,
ChatIcon,
BookOpenIcon,
} from "@heroicons/react/outline";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import 'react-resizable/css/styles.css';
import LeftSideBar from "../components/LeftSideBar";


export default function Dashboard() {
const [weather, setWeather] = useState(null);

return (
<>

const CardItems = [
{ name: "Content Sharing", url: "/ContentSharing" },
{ name: "Discussions", url: "/Discussions" },
{ name: "Inquire About Crops", url: "/InquireAboutCrops" },
{ name: "Learning And Resources", url: "/LearningAndResources" },
{ name: "Personal AI Support Bot", url: "/PersonalAiSupportBot" },
{ name: "Season Dashboard", url: "/SeasonDashboard" },
{ name: "User Profiles", url: "/UserProfiles" },
{ name: "Weather Dashboard", url: "/WeatherDashboard" }
];

const ExtraCardItems = [
{ name: "About US", url: "/aboutus" },
{ name: "Contact US", url: "/contactus" },
{ name: "FAQ", url: "/faq" },
{ name: "Privacy and Policy", url: "/privacy" },
{ name: "Terms and Services", url: "/terms" }
];

return (
<>
<div className="min-h-screen flex flex-col">
<Navbar />

<div className="flex min-h-screen">
<div className="left w-[30%] bg-red-500"></div>
<div className="right w-[70%]">
<main className="flex-grow container mx-auto p-4">
<h1 className="text-3xl font-bold mb-4">Welcome to FarmRuler Dashboard</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="bg-white shadow-md rounded-lg p-4 flex items-center">
<SunIcon className="h-6 w-6 text-yellow-500 mr-2" />
<div>
<h2 className="text-xl font-semibold">Weather Dashboard</h2>
<p>Check the weather conditions in specific regions.</p>
</div>
</div>
<div className="bg-white shadow-md rounded-lg p-4 flex items-center">
<CloudIcon className="h-6 w-6 text-blue-500 mr-2" />
<div>
<h2 className="text-xl font-semibold">Season Dashboard</h2>
<p>Get insights on different seasons and their impact on crops.</p>
</div>
</div>
<div className="bg-white shadow-md rounded-lg p-4 flex items-center">
<UserIcon className="h-6 w-6 text-green-500 mr-2" />
<div>
<h2 className="text-xl font-semibold">Inquire About Crops</h2>
<p>Ask questions and get answers about various crops.</p>
</div>
</div>
<div className="bg-white shadow-md rounded-lg p-4 flex items-center">
<ChatIcon className="h-6 w-6 text-purple-500 mr-2" />
<div>
<h2 className="text-xl font-semibold">Personal AI Support Bot</h2>
<p>Get personalized support from our AI bot.</p>

<div className="flex min-h-screen">
<LeftSideBar />
<div className="right w-[70%] min-w-[50%]">
<main className="flex-grow container mx-auto p-4">
<h1 className="text-3xl font-bold mb-4">
Welcome to FarmRuler Dashboard
</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="bg-white shadow-md rounded-lg p-4 flex items-center">
<SunIcon className="h-6 w-6 text-yellow-500 mr-2" />
<div>
<h2 className="text-xl font-semibold">Weather Dashboard</h2>
<p>Check the weather conditions in specific regions.</p>
</div>
</div>
<div className="bg-white shadow-md rounded-lg p-4 flex items-center">
<CloudIcon className="h-6 w-6 text-blue-500 mr-2" />
<div>
<h2 className="text-xl font-semibold">Season Dashboard</h2>
<p>
Get insights on different seasons and their impact on
crops.
</p>
</div>
</div>
<div className="bg-white shadow-md rounded-lg p-4 flex items-center">
<UserIcon className="h-6 w-6 text-green-500 mr-2" />
<div>
<h2 className="text-xl font-semibold">
Inquire About Crops
</h2>
<p>Ask questions and get answers about various crops.</p>
</div>
</div>
<div className="bg-white shadow-md rounded-lg p-4 flex items-center">
<ChatIcon className="h-6 w-6 text-purple-500 mr-2" />
<div>
<h2 className="text-xl font-semibold">
Personal AI Support Bot
</h2>
<p>Get personalized support from our AI bot.</p>
</div>
</div>
<div className="bg-white shadow-md rounded-lg p-4 flex items-center">
<UserIcon className="h-6 w-6 text-red-500 mr-2" />
<div>
<h2 className="text-xl font-semibold">User Profiles</h2>
<p>Manage your profile and settings.</p>
</div>
</div>
<div className="bg-white shadow-md rounded-lg p-4 flex items-center">
<ChatIcon className="h-6 w-6 text-indigo-500 mr-2" />
<div>
<h2 className="text-xl font-semibold">Discussions</h2>
<p>Join discussions with other farmers and experts.</p>
</div>
</div>
<div className="bg-white shadow-md rounded-lg p-4 flex items-center">
<BookOpenIcon className="h-6 w-6 text-teal-500 mr-2" />
<div>
<h2 className="text-xl font-semibold">Content Sharing</h2>
<p>Share and access valuable content.</p>
</div>
</div>
<div className="bg-white shadow-md rounded-lg p-4 flex items-center">
<BookOpenIcon className="h-6 w-6 text-orange-500 mr-2" />
<div>
<h2 className="text-xl font-semibold">
Learning and Resources
</h2>
<p>Access learning materials and resources.</p>
</div>
</div>
</div>
</div>
<div className="bg-white shadow-md rounded-lg p-4 flex items-center">
<UserIcon className="h-6 w-6 text-red-500 mr-2" />
<div>
<h2 className="text-xl font-semibold">User Profiles</h2>
<p>Manage your profile and settings.</p>
</div>
</div>
<div className="bg-white shadow-md rounded-lg p-4 flex items-center">
<ChatIcon className="h-6 w-6 text-indigo-500 mr-2" />
<div>
<h2 className="text-xl font-semibold">Discussions</h2>
<p>Join discussions with other farmers and experts.</p>
</div>
</div>
<div className="bg-white shadow-md rounded-lg p-4 flex items-center">
<BookOpenIcon className="h-6 w-6 text-teal-500 mr-2" />
<div>
<h2 className="text-xl font-semibold">Content Sharing</h2>
<p>Share and access valuable content.</p>
</div>
</div>
<div className="bg-white shadow-md rounded-lg p-4 flex items-center">
<BookOpenIcon className="h-6 w-6 text-orange-500 mr-2" />
<div>
<h2 className="text-xl font-semibold">Learning and Resources</h2>
<p>Access learning materials and resources.</p>
</div>
</div>
</main>
</div>
</main>
</div>
</div>

</div>
<Footer />
</div>
</>

);
}
</>
);
}
Loading

0 comments on commit f2300f4

Please sign in to comment.