Build React App with KendoReact Components

App.js import React, { useState } from 'react'; import { Button } from '@progress/kendo-react-buttons'; import { Input } from '@progress/kendo-react-inputs'; import { DropDownList } from '@progress/kendo-react-dropdowns'; import { DatePicker } from '@progress/kendo-react-dateinputs'; import { Grid, GridColumn } from '@progress/kendo-react-grid'; import { Dialog } from '@progress/kendo-react-dialogs'; import { Notification } from '@progress/kendo-react-notification'; import { ProgressBar } from '@progress/kendo-react-progressbars'; import { Card, CardTitle, CardBody } from '@progress/kendo-react-layout'; import './App.css'; // Add custom CSS for styling const App = () => { const [tasks, setTasks] = useState([ { id: 1, title: 'Task 1', priority: 'High', dueDate: '2023-12-01', status: 'In Progress' }, { id: 2, title: 'Task 2', priority: 'Medium', dueDate: '2023-11-15', status: 'Completed' }, ]); const [newTask, setNewTask] = useState({ title: '', priority: 'Low', dueDate: '', status: 'Pending' }); const [isDialogOpen, setIsDialogOpen] = useState(false); const [notification, setNotification] = useState(null); const priorities = ['Low', 'Medium', 'High']; const handleInputChange = (e) => { setNewTask({ ...newTask, [e.target.name]: e.target.value }); }; const handleDateChange = (e) => { setNewTask({ ...newTask, dueDate: e.value }); }; const handlePriorityChange = (e) => { setNewTask({ ...newTask, priority: e.value }); }; const addTask = () => { if (!newTask.title || !newTask.dueDate) { setNotification({ type: 'error', message: 'Please fill all fields!' }); return; } setTasks([...tasks, { ...newTask, id: tasks.length + 1 }]); setNewTask({ title: '', priority: 'Low', dueDate: '', status: 'Pending' }); setIsDialogOpen(false); setNotification({ type: 'success', message: 'Task added successfully!' }); }; const closeNotification = () => { setNotification(null); }; return ( {/* Title Section /} Task Management Dashboard Manage your tasks efficiently with this dashboard. {/ Button to Open Dialog /} setIsDialogOpen(true)}> Add New Task {/ Dialog for Adding New Task /} {isDialogOpen && ( setIsDialogOpen(false)}> Add Task )} {/ Notification /} {notification && ( {notification.message} )} {/ Task Grid /} {/ Progress Bar /} Task Progress task.status === 'Completed').length / tasks.length 100} /> ); }; export default App; App.css Add the following CSS to make the app wider and style it properly: .App { max-width: 1200px; margin: 0 auto; padding: 20px; font-family: Arial, sans-serif; } .title-section { text-align: center; margin-bottom: 30px; } .title-section h1 { font-size: 2.5rem; margin-bottom: 10px; } .title-section p { font-size: 1.2rem; color: #666; } .button-section { text-align: right; margin-bottom: 20px; } .dialog-content { display: flex; flex-direction: column; gap: 15px; } .grid-section { margin-top: 20px; } .progress-section { margin-top: 30px; } .k-card { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px; } .k-card-title { font-size: 1.5rem; font-weight: bold; } .k-card-body { padding: 20px; } Key Changes Wider Layout: The app now has a max-width of 1200px and is centered on the page. Title Section: Added a title and subtitle at the top of the app. Improved Styling: Added padding, margins, and shadows to make the app more visually appealing. Full-Width Components: Adjusted the width of inputs, dropdowns, and the grid to take up the full available space. How It Looks Title Section: A centered title and subtitle at the top. Add Task Button: Positioned at the top-right corner. Dialog: A modal form for adding new tasks. Grid: Displays all tasks in a wide, responsive table. Progress Bar: Shows the percentage of completed tasks in a card.

Mar 14, 2025 - 20:43

Build React App with KendoReact Components

App.js

import React, { useState } from 'react';
import { Button } from '@progress/kendo-react-buttons';
import { Input } from '@progress/kendo-react-inputs';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { DatePicker } from '@progress/kendo-react-dateinputs';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { Dialog } from '@progress/kendo-react-dialogs';
import { Notification } from '@progress/kendo-react-notification';
import { ProgressBar } from '@progress/kendo-react-progressbars';
import { Card, CardTitle, CardBody } from '@progress/kendo-react-layout';
import './App.css'; // Add custom CSS for styling

const App = () => {
  const [tasks, setTasks] = useState([
    { id: 1, title: 'Task 1', priority: 'High', dueDate: '2023-12-01', status: 'In Progress' },
    { id: 2, title: 'Task 2', priority: 'Medium', dueDate: '2023-11-15', status: 'Completed' },
  ]);
  const [newTask, setNewTask] = useState({ title: '', priority: 'Low', dueDate: '', status: 'Pending' });
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [notification, setNotification] = useState(null);

  const priorities = ['Low', 'Medium', 'High'];

  const handleInputChange = (e) => {
    setNewTask({ ...newTask, [e.target.name]: e.target.value });
  };

  const handleDateChange = (e) => {
    setNewTask({ ...newTask, dueDate: e.value });
  };

  const handlePriorityChange = (e) => {
    setNewTask({ ...newTask, priority: e.value });
  };

  const addTask = () => {
    if (!newTask.title || !newTask.dueDate) {
      setNotification({ type: 'error', message: 'Please fill all fields!' });
      return;
    }
    setTasks([...tasks, { ...newTask, id: tasks.length + 1 }]);
    setNewTask({ title: '', priority: 'Low', dueDate: '', status: 'Pending' });
    setIsDialogOpen(false);
    setNotification({ type: 'success', message: 'Task added successfully!' });
  };

  const closeNotification = () => {
    setNotification(null);
  };

  return (
    <div className="App">
      {/* Title Section */}
      <div className="title-section">
        <h1>Task Management Dashboardh1>
        <p>Manage your tasks efficiently with this dashboard.p>
      div>

      {/* Button to Open Dialog */}
      <div className="button-section">
        <Button primary={true} onClick={() => setIsDialogOpen(true)}>
          Add New Task
        Button>
      div>

      {/* Dialog for Adding New Task */}
      {isDialogOpen && (
        <Dialog title="Add New Task" onClose={() => setIsDialogOpen(false)}>
          <div className="dialog-content">
            <Input
              name="title"
              label="Task Title"
              value={newTask.title}
              onChange={handleInputChange}
              style={{ width: '100%' }}
            />
            <DropDownList
              data={priorities}
              value={newTask.priority}
              onChange={handlePriorityChange}
              label="Priority"
              style={{ width: '100%' }}
            />
            <DatePicker
              value={newTask.dueDate}
              onChange={handleDateChange}
              label="Due Date"
              style={{ width: '100%' }}
            />
            <Button primary={true} onClick={addTask} style={{ marginTop: '10px' }}>
              Add Task
            Button>
          div>
        Dialog>
      )}

      {/* Notification */}
      {notification && (
        <Notification
          type={notification.type}
          style={{ margin: '10px', position: 'fixed', top: '20px', right: '20px' }}
          onClose={closeNotification}
        >
          {notification.message}
        Notification>
      )}

      {/* Task Grid */}
      <div className="grid-section">
        <Grid data={tasks} style={{ width: '100%' }}>
          <GridColumn field="id" title="ID" width="80px" />
          <GridColumn field="title" title="Title" />
          <GridColumn field="priority" title="Priority" width="120px" />
          <GridColumn field="dueDate" title="Due Date" width="150px" />
          <GridColumn field="status" title="Status" width="150px" />
        Grid>
      div>

      {/* Progress Bar */}
      <div className="progress-section">
        <Card>
          <CardTitle>Task ProgressCardTitle>
          <CardBody>
            <ProgressBar value={tasks.filter(task => task.status === 'Completed').length / tasks.length * 100} />
          CardBody>
        Card>
      div>
    div>
  );
};

export default App;

App.css

Add the following CSS to make the app wider and style it properly:

.App {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.title-section {
  text-align: center;
  margin-bottom: 30px;
}

.title-section h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.title-section p {
  font-size: 1.2rem;
  color: #666;
}

.button-section {
  text-align: right;
  margin-bottom: 20px;
}

.dialog-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.grid-section {
  margin-top: 20px;
}

.progress-section {
  margin-top: 30px;
}

.k-card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.k-card-title {
  font-size: 1.5rem;
  font-weight: bold;
}

.k-card-body {
  padding: 20px;
}

Key Changes

Wider Layout: The app now has a max-width of 1200px and is centered on the page.
Title Section: Added a title and subtitle at the top of the app.
Improved Styling: Added padding, margins, and shadows to make the app more visually appealing.
Full-Width Components: Adjusted the width of inputs, dropdowns, and the grid to take up the full available space.

How It Looks

Title Section: A centered title and subtitle at the top.
Add Task Button: Positioned at the top-right corner.
Dialog: A modal form for adding new tasks.
Grid: Displays all tasks in a wide, responsive table.
Progress Bar: Shows the percentage of completed tasks in a card.