https://github.com/emam-bokhari/tasker
https://github.com/emam-bokhari/tasker
reactjs tailwindcss
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/emam-bokhari/tasker
- Owner: Emam-Bokhari
- Created: 2024-01-16T07:20:05.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-05T06:50:11.000Z (9 months ago)
- Last Synced: 2025-02-02T08:29:46.961Z (4 months ago)
- Topics: reactjs, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 982 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
cover: .gitbook/assets/Screenshot_2.png
coverY: 0
layout:
cover:
visible: true
size: full
title:
visible: true
description:
visible: false
tableOfContents:
visible: true
outline:
visible: true
pagination:
visible: true
---
# Documentation for Task Management Application
## Overview
This application is a task management tool built using React. It includes various components to manage tasks, such as adding, editing, deleting, and searching tasks. The application uses useState for state management and useContext for managing global state.
## Components
### App Component
* **Purpose:** Serves as the main component that includes all other components.
* **Usage:** Renders Header, HeroSection, TaskBoard, and Footer within a styled container.
```jsx
import { Fragment } from "react";
import Header from "./components/Header";
import HeroSection from "./components/HeroSection";
import TaskBoard from "./components/Task/TaskBoard";
import Footer from "./components/Footer";
export default function App() {
return (
);
}
```
### Header Component
* **Purpose:** Displays the application’s logo at the top of the page.
* **Usage:** Fixed at the top of the page with navigation.
```jsx
import { Fragment } from "react";
import Logo from "../assets/lws-logo-en.svg";
export default function Header() {
return (
{/* Logo */}
);
}
```
### HeroSection Component
* Purpose: Displays the main hero section with a title and description.
* Usage: Positioned below the header and includes an image and text content.
import { Fragment } from "react";
import Frame from "../assets/frame.png";
export default function HeroSection() {
return (
<Fragment>
<section className="pb-[114px] pt-20 md:mt-[100px]">
<div className="container lg:px-20">
<div className="grid items-center gap-6 md:grid-cols-2">
<div className="flex justify-center md:order-2">
<img
className="max-md:w-full"
src={Frame}
width="326"
height="290"
alt="frame"
/>
</div>
<div>
<h1 className="mb-1.5 text-[56px] font-bold leading
none text-[#F5BF42] lg:text-[73px]">
Tasker
</h1>
<p className="text-lg my-2 opacity-60">
Effortlessly Organize, Prioritize, and Conquer
Tasks with Tasker
- Your Personal Productivity Ally for Seamless Goal
Achievement
and Stress-Free Task Management.
</p>
</div>
</div>
</div>
</section>
</Fragment>
);
}