sumitkharche

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Fabric } from "@fluentui/react";

ReactDOM.render(
  <React.StrictMode>
    <Fabric>

sumitkharche

import React from 'react';
import { Stack, Label } from "@fluentui/react";
import TodoItem from './TodoItem';

function TodoList(props:any) {

    return (
        <Stack gap={10} >
            { props.todos.length > 0 ? props.todos.map((todo: any) => (
                <TodoItem todo={todo} key={todo.id}/>

sumitkharche

import React from 'react';
import { Stack, Label } from '@fluentui/react';

function TodoItem(props: any) {
    return (
        <Stack>
            <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
                <Label>{props.todo.name}</Label>
            </Stack>
        </Stack>

sumitkharche

import React, { useState } from 'react';
import './App.css';
import { Stack } from "@fluentui/react";
import TodoList from './components/TodoList';

function App() {
  const [todos, setTodos] = useState([{ id: 1, name: "Todo Item 1" }, { id: 2, name: "Todo Item 2" }]);
  return (
    <div className="wrapper">
      <Stack horizontalAlign="center">

sumitkharche

import React, { useState } from 'react';
import { Stack,TextField, PrimaryButton } from "@fluentui/react";

function AddTodo(props:any) {
    const [todoName, setTodoName] = useState("");    
    const addTodo = () => {      
        props.addTodo(todoName);
        setTodoName("");
    }
    const setTodo = (e: any) =>{

sumitkharche

import React, { useState } from 'react';
import './App.css';
import { Stack } from "@fluentui/react";
import TodoList from './components/TodoList';
import AddTodo from './components/AddTodo';

function App() {
  const [todos, setTodos] = useState([{ id: 1, name: "Todo Item 1" }, { id: 2, name: "Todo Item 2" }]);

  const addTodo = (todoName: string) => {

sumitkharche

import React, { useState } from 'react';
import { Stack, Label, IconButton, Dialog, DialogFooter, DefaultButton, PrimaryButton, DialogType } from '@fluentui/react';

function TodoItem(props: any) {
    const [openDeleteModal, setOpenModal] = useState(true);

    const deleteTodo = (id: number) => {
        props.deleteTodo(id);
        setOpenModal(true);
    }

sumitkharche

{
  "AppSettings": {
    "COSMIC_BUCKET_SLUG": "" // replace your bucket slug
  }
}

sumitkharche

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using BlazorCosmicBlog.Models;

sumitkharche

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorCosmicBlog.Models
{
    public class Post
    {
        public string _id { get; set; }