{"version":3,"sources":["pages/home/HomeElements.js","pages/home/Home.js","pages/Contact/ContactElements.js","pages/SubscribeandLogin/LoginElements.js","components/Comments.js","components/PostComment.js","components/BlogLay/BloglayElements.js","components/Recipes/RecipeElements.js","components/LoadingPage/LoadingElements.js","pages/SubscribeandLogin/Subscribe.js","pages/About/AboutElements.js","pages/About/littleme.webp","pages/About/About.js","components/Footer/FooterElements.js","components/BlogCard/BlogCardElements.js","components/BlogCard/BlogCard.js","components/Category/CategoryElements.js","pages/Post/PostElements.js","pages/Post/PostBlog.js","components/NewNav/NavElements.js","components/UniversalElements.js","App.js","reportWebVitals.js","components/Construction/UnderCElements.js","components/Construction/UnderConstruction.js","index.js"],"names":["styled","div","_templateObject","_taggedTemplateLiteral","Home","_templateObject2","h1","_templateObject3","_templateObject4","form","_templateObject5","button","_templateObject6","Comments","PostComment","img","_templateObject7","_templateObject8","_templateObject9","h3","p","Subscribe","About","LinkS","BlogCard","PostBlog","nav","App","reportWebVitals","onPerfEntry","Function","then","_ref","getCLS","getFID","getFCP","getLCP","getTTFB","ConstructionPage","ContentContainer","Content","UnderConstruction","_jsx","children","_jsxs","href","ReactDOM","render","React","StrictMode","BrowserRouter","document","getElementById"],"mappings":"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","file":"static/js/main.6b46be14.chunk.js","sourcesContent":["import styled from \"styled-components\";\n\nexport const HomeDiv = styled.div`\nbackground-color: white;\n\n`","import { useNavigate } from \"react-router-dom\";\n// import Carousel from \"../../components/Carousel/Carousel\";\nimport { useState,useEffect } from \"react\";\nimport { animateScroll as scroll } from 'react-scroll';\n// import BlogInfo from \"../../components/BlogInfo/BlogInfo\";\nimport { HomeDiv } from \"./HomeElements\";\n \n\nfunction Home ({search, currentUser, setSearch}) {\n    const navigate = useNavigate()\n    const [featuredPosts, setFeaturedPosts] = useState([])\n\n  useEffect(() => {\n    fetch(\"/blogs\")\n    .then(res => res.json())\n    .then(data => setFeaturedPosts(data))\n  }, [])\n\n\n  const featured = featuredPosts.filter((b) => b.featured === true)\n\n  \n\n  function getBlog(id){\n    if (id){\n        navigate(`/${id}`)\n    }\n    scroll.scrollToTop()\n  }\n\n    return (\n       <HomeDiv>\n        {/* <Carousel featured={featured} getBlog={getBlog}/>\n        <BlogInfo currentUser={currentUser} search={search} setSearch={setSearch}/> */}\n        </HomeDiv>\n        \n    )\n}\n\nexport default Home;","import styled from \"styled-components\";\n\nexport const  ContactMeContainer = styled.div`\nwidth: 100%;\ndisplay: flex;\nflex-direction: column;\nalign-items: center;\npadding: 3%;\n\n@media screen and (max-width: 550px){\n    // padding: 7% 0% 7% 0%;\n    margin-top: 30px;\n}\n`\n\nexport const ContactMeContent = styled.div`\nwidth: 60%;\ndisplay: flex;\nflex-direction: column;\n\n@media screen and (max-width: 550px){\n    width: 100%\n}\n`\n\nexport const ContactMeHeading = styled.h1`\nfont-weight: bold;\nfloat: left;\n`\n\nexport const FormContainer = styled.div`\nmax-width: 600px\n`\nexport const Form = styled.form`\ndisplay: flex;\nflex-direction: column;\ngap: 5px;\n\n`\n\nexport const SendButton = styled.button`\nmax-width: 20%;\nborder: none;\nbackground-color: black;\ncolor: white;\n`","import styled from \"styled-components\";\n\n\nexport const  LoginContainer = styled.div`\nwidth: 100%;\ndisplay: flex;\nflex-direction: column;\nalign-items: center;\npadding: 10%;\nmin-height: 450px;\n\n@media screen and (max-width: 500px){\n    padding: 7% 0% 7% 0%;\n    margin-top: 30px;\n    min-height: 320px;\n}\n` \nexport const Contain = styled.div`\nwidth: 40%;\nmax-width: 275px;\n\n@media screen and (max-width: 300px){\n    padding: 5px;\n    width: 100%\n}\n\n`\n","import { useEffect, useState } from \"react\";\n\nfunction Comments({c, currentUser, handleDelete}){\n    const [user, setUser] = useState([])\n    // const [likes, setLikes] = useState(c.likes)\n\n\n    useEffect(() => {\n        fetch(`/user/${c.user_id}`)\n        .then(res => res.json())\n        .then(data => setUser(data))\n    },[])\n\n    function deleteComment(){\n        fetch(`comments/${c.id}`, {\n            method: \"DELETE\",\n        })\n        handleDelete(c.id)\n    }\n\n    let me = \"angpace13@gmail.com\"\n\n    // function likeComment(e){\n    //     e.preventDefault()\n    //    fetch(`comment/${c.id}`, {\n    //     method: \"PATCH\",\n    //     headers: { 'content-type': 'application/json' },\n    //     body: JSON.stringify({\n    //          likes: 0\n    //         })\n    //      })\n    //      .then(res => res.json())\n    // }\n    \n    if(currentUser){\n        if(currentUser.id === c.user_id || currentUser.email === me ){\n            return <div className=\"card\">\n            <div className=\"card-body\">\n             <p><strong>{user.name}</strong></p>\n             <p>{c.content}</p>\n             <button className=\"btn btn-outline-secondary\" onClick={deleteComment}>delete</button>\n             </div>\n          </div> \n        }\n    }\n    \n    return( \n    <div className=\"card\">\n       <div className=\"card-body\">\n        <p><strong>{user.name}</strong></p>\n        <p>{c.content}</p>\n        </div>\n     </div> \n    )\n}\n\nexport default Comments;","import { useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport toast, { Toaster } from 'react-hot-toast';\n\nfunction PostComment({currentUser, id, handleCommentUpdate}){\n    const [comment, setComment] = useState({\n        email: \"\",\n        content: \"\",\n        blog_id: id\n    })\n\n\n\n    function handleComment(e){\n        const { name, value } = e.target \n        setComment({...comment, [name]: value })\n    }\n\n    function submitComment(e){\n        e.preventDefault()\n        fetch(\"/comments\", {\n            method: \"POST\",\n            headers: { 'content-type': 'application/json' },\n           body: JSON.stringify({\n            content: comment.content,\n            blog_id: id,\n            user_id: currentUser.id\n           })\n        })\n        .then(res => res.json())\n        .then(data => handleCommentUpdate(data))\n        toast.success(\"Thank you for your comment!\")\n        e.target.reset()\n\n    }\n\n    return (\n        <>\n        <Toaster\n              position=\"bottom-right\"\n              reverseOrder={false}\n            />\n        {currentUser? \n\n            <form onSubmit={submitComment}>\n                    <br/>\n                    <div className=\"mb-3\">\n                            <label htmlFor=\"exampleFormControlTextarea1\" \n                                className=\"form-label\">Comment\n                            </label>\n                        <textarea className=\"form-control\" \n                            id=\"exampleFormControlTextarea1\" \n                            rows=\"3\"\n                            name=\"content\"\n                            placeholder=\"Write your comment here!\"\n                            onChange={handleComment}\n                            >\n                        </textarea>\n                        <br/>\n                    <button type=\"submit\" className=\"btn btn-outline-secondary\">Post</button>\n            \n            </div>\n        </form>\n        \n    :\n    <form onSubmit={submitComment}>\n                    <div className=\"mb-3\">\n                        <br/>\n                            </div>\n                            <div className=\"mb-3\">\n                                    <label htmlFor=\"exampleFormControlTextarea1\" \n                                        className=\"form-label\">Comment\n                                    </label>\n                                <textarea className=\"form-control\" \n                                    id=\"exampleFormControlTextarea1\" \n                                    rows=\"3\"\n                                    name=\"content\"\n                                    placeholder=\"To make a comment you have to be subscribed and signed in.\"\n                                    onChange={handleComment}\n                                    readOnly\n                                    >\n                                </textarea>\n                                <br/>\n                    <Link style={{textDecoration: \"none\", color: \"black\"}} to=\"/login\" >Go to login →</Link>\n                    </div>\n                </form>}\n         </>\n    )\n}\n\nexport default PostComment;","import styled from \"styled-components\";\n\nexport const BlogLayContainer = styled.div`\nbackground-color: white;\nwidth: 100%;\nmargin: auto;\nmargin-top: 26px;\n`\n\nexport const FeatureContain = styled.div`\nwidth: 100%;\noverflow: hidden;\nmax-height: 300px;\n\n`\n\nexport const Feature = styled.img`\n  width: 100%; /* Make the image 90% of the container's width */\n  /* max-height: 350px; Set the maximum height of the image */\n  object-fit: cover;\n  /* border-radius: 15px; */\n`\nexport const BlogContent = styled.div`\nmargin: auto;\nwidth: 80%;\nmax-width: 900px;\n\n@media screen and (max-width: 600px) {\n    width: 90%\n}\n`\n\nexport const BlogTitle = styled.h1`\nfont-size: 60px;\npadding-top: 5%;\npadding-bottom: 3%;\n\n@media screen and (max-width: 600px) {\n   font-size: 30px;\n}\n`\nexport const SecondImgContainer = styled.div`\ndisplay: flex;\njustify-content: center;\noverflow: hidden;\nmax-height: 300px;\n`\nexport const SecondImage = styled.img`\nwidth: 85%;\npadding: 2%;\nobject-fit: cover;\n\n`\n\nexport const ButtonContainer = styled.div`\npadding-bottom: 10%;\n\n@media screen and (max-width: 440px){\n    padding-bottom: 15%;  \n}\n`\n\nexport const JumpToRecipe = styled.button`\nfloat: right;\n`\n\n\n","import styled from \"styled-components\";\n\nexport const RecipeContainer = styled.div`\nmargin-top: 10%;\npadding-top: 10%;\n/* border: thin solid; */\npadding: 5%;\n\n\n@media screen and (max-width: 440px){\n    padding-top: 15%;\n}\n`\nexport const MiniTitle = styled.h3`\npadding-top: 5%;\n`\n\nexport const RecipeImageContainer = styled.div`\ndisplay: flex;\nflex-direction: column;\njustify-content: center;\nalign-items: center;\npadding-top: 7%;\n\n/* border: thin solid; */\n`\n\nexport const RecipeImage = styled.img`\nheight: 200px;\nwidth: 200px;\nborder-radius: 50%;\n`\nexport const RecipeTitle = styled.p`\nfont-size: 22px;\n\n`\n\nexport const RecipeInformation = styled.div`\ndisplay: flex;\nflex-direction: row;\njustify-content: center;\n/* justify-content: space-around */\n\n@media screen and (max-width: 440px){\n    flex-direction: column;\n}\n\n`\nexport const RecipeDetails = styled.p`\npadding-right: 5%\n`","import styled from \"styled-components\";\n\nexport const SpinnerContainer = styled.div`\nmargin-top: 70px;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\npadding: 15%;\njustify-content: space-around;\n`","import { useState } from \"react\";\nimport toast, { Toaster } from 'react-hot-toast';\nimport { useNavigate } from \"react-router-dom\";\nimport {Form} from \"../Contact/ContactElements\";\nimport { Contain, LoginContainer } from \"./LoginElements\";\n\nfunction Subscribe(){\n  const nav = useNavigate()\n    const [subscriber, setSubscriber] = useState({\n        name: \"\",\n        email: \"\",\n        password: \"\",\n      })\n\n\n      function handleChange(e){\n        const {name, value} = e.target\n       setSubscriber({...subscriber, [name]: value})\n       \n     }\n   \n      function handleSubscription(e){\n        e.preventDefault()\n        fetch('/users', {\n          method: \"POST\",\n          headers: { 'content-type': 'application/json'},\n          body: JSON.stringify({\n            name: subscriber.name,\n            email: subscriber.email,\n            password: subscriber.password\n          }) \n        })\n        .then(res => {\n          if (res.status === 200){\n            res.json()\n            .then(data => console.log(data))\n            toast.success(\"Thanks for subscribing!\")\n            nav(\"/login\")\n          } else if (res.status === 422){\n            res.json()\n            .then(data => toast.error(data.error[0]))\n          }\n        })\n        e.target.reset();\n      }\n\n    return(\n        <LoginContainer>\n          <Toaster\n              position=\"bottom-right\"\n              reverseOrder={false}\n            />\n        <center className=\"sub_text\">\n        <h3>Thank you for your interest in Kitchen and Code!</h3>\n        <p>Sign up to receive email updates for new blog posts.</p>\n        </center>\n        <Contain>\n        <Form className=\"subscribe\" id=\"subscribe\" onSubmit={handleSubscription}>\n          <input\n          placeholder='Username'\n          onChange={handleChange}\n          name=\"name\"\n          />\n          <input\n          placeholder='Email'\n          onChange={handleChange}\n          name=\"email\"\n\n          />\n          <input\n          placeholder='Password'\n          onChange={handleChange}\n          name=\"password\"\n          type=\"password\"\n          />\n          <button className='btn btn-secondary' type=\"submit\">Sign Up</button>\n          </Form>\n          </Contain>\n        </LoginContainer>\n    )\n}\n\nexport default Subscribe;","import styled from \"styled-components\";\n\nexport const AboutContainer = styled.div`\npadding: 10%;\ndisplay: flex;\njustify-content: space-between;\nmax-height: 650px;\nmax-width: 1600px;\nalign-items: center;\n\n@media screen and (max-width: 600px) {\n    flex-direction: column;\n    margin-top: 30px;\n    max-height: 100%;\n}\n`\n\nexport const Image = styled.img`\nwidth: 40%;\nmax-width: 400px;\n/* height: 40% */\n\n@media screen and (max-width: 600px) {\n   width: 100%\n}\n`\nexport const AboutMeContent = styled.div`\nwidth: 50%;\nfloat: right;\n\n@media screen and (max-width: 600px) {\n   width: 100%\n}\n`\nexport const Content = styled.div`\ndisplay: flex;\nflex-direction: column;\n`\nexport const Title = styled.h3`\nfont-weight: 600px\n`\nexport const Body = styled.p`\n`","export default __webpack_public_path__ + \"static/media/littleme.fc7f35ad.webp\";","import { AboutContainer, Image, AboutMeContent, Content, Title, Body} from \"./AboutElements\";\nimport littleme from './littleme.webp'\n\nfunction About () {\n\n    return (\n     <AboutContainer>\n         <AboutMeContent>\n            <Content>\n                <Title>About</Title>\n                <Body> Kitchen and Code is a collaboration of some of my many passions, food, technology and sharing knowledge about these topics. Before becoming a Software Engineer, \n                    I worked as a Pastry Chef in Michelin-starred restaurants around the world. Even before that, I grew up in an Italian household that always seemed to revolve around food. My passion for technology came later in life, when it replaced food as the \"glue\" that kept my family close.\n                    Hospitality and Technology have many things in common, among the most important to me is bringing people together.\n                    I'm Angela Pace and I hope you'll join me in this journey, exploring all things Kitchen and Code.\n                    <br/>\n                    <br/>\n                    <strong>Currently: Product & Data Analyst at Loyalist, Specialist at Apple</strong>\n                </Body>\n            </Content>\n        </AboutMeContent>\n        <Image src={littleme}></Image>\n     </AboutContainer>\n    )\n}\n\nexport default About;","import { Link as LinkS } from \"react-router-dom\";\nimport styled from \"styled-components\";\n\nexport const FooterFlex = styled.div`\nmax-height: 200px;\n/* border-top: thin solid; */\n\n/* max-width: 1100px; */\n\n@media screen and (max-width: 400px){\n   /* max-height: 100px; */\n}\n\n`\n\nexport const FooterContent = styled.div`\npadding: 5%;\ndisplay: flex;\njustify-content: space-around;\nbackground-color: rgba(225,232,238,0.95);\n/* background-color: #e8e8ed; */\n\n@media screen and (max-width: 820px){\n    flex-direction: column;\n}\n`\nexport const FooterTitle = styled.p`\nfont-weight: 600;\npadding-top: 6px;\ncolor: #333333;\n`\n\nexport const FooterLinks = styled.div`\ndisplay: flex;\nflex-direction: column;\n/* align-items: center; */\n`\n\nexport const Link = styled(LinkS)`\ntext-decoration: none;\ncolor: #333333;\n\n&:hover{\n    color: gray;\n    transition: 0.3s ease-out\n}\n`\nexport const SocialMediaWrap = styled.div`\ndisplay: flex;\ngap: 8%;\nalign-items: center;\nmax-width: 1100px;\n\n@media screen and (max-width: 820px){\n    padding-top: 2%;\n    gap: 3%;\n}\n`\n\n","import styled from \"styled-components\";\n\nexport const Container = styled.div`\nbox-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 15px 0 rgba(0, 0, 0, 0.19);background-color: white;\n/* border: thin solid; */\n/* border-color: rgba(233,188,68,0.9808517156862745); */\nborder-radius: 20px;\n\n&:hover{\n    cursor: pointer;\n}\n\n`\n\nexport const BlogCardContainer = styled.div`\nmax-width: 90%;\nmargin: auto;\n\n@media screen and (max-width: 500px){\n    max-width: 100%;\n}\n`\nexport const CardTitle = styled.h3`\nfont-weight: 200;\n\n@media screen and (max-width: 400px){\n   font-weight: 300px;\n   font-size: 18px;\n}\n\n`\nexport const TitleandDate= styled.div`\ndisplay: flex;\njustify-content: space-between;\npadding-top: 1%;\n\n@media screen and (max-width: 600px){\n    flex-direction: column;\n    padding-left: 4%;\n    font-size: 14px;\n}\n\n`\nexport const CardDate = styled.p`\nfont-size: 15px;\n@media screen and (max-width: 600px){\n    font-size: 13px;\n}\n\n`\nexport const CardPreview = styled.p`\n\n@media screen and (max-width: 600px){\n   padding-left: 4%;\n   padding-right: 2%;\n   font-size: 13px;\n}\n`\nexport const CardLikes = styled.p`\ncolor: gray; \nfont-size: 10px;\npadding-bottom: 3%;\n/* font-style: italic; */\n@media screen and (max-width: 600px){\n   padding-left: 3%\n}\n`\n\nexport const ImgContainer = styled.div`\npadding-top: 4%;\noverflow: hidden;\nmax-height: 250px;\ndisplay: flex;\n    justify-content: center;\n    \n`\n\nexport const CardImage = styled.img`\n  width: 100%; /* Make the image 90% of the container's width */\n  max-height: 350px; /* Set the maximum height of the image */\n  object-fit: cover;\n  border-radius: 20px;\n  /* border: thin solid; */\n\n  @media screen and (max-width: 500px){\n    width: 90%;\n   \n}\n`","import { useState } from \"react\";\nimport { useNavigate} from \"react-router-dom\";\nimport { animateScroll as scroll } from 'react-scroll';\nimport { BlogCardContainer, CardDate, CardTitle, CardPreview, CardLikes, Container, ImgContainer, CardImage, TitleandDate } from \"./BlogCardElements\";\n\nfunction BlogCard ({b, currentUser, handleDelete, rerender}) {\n    const navigate = useNavigate();\n    const [edit, setEdit] = useState(false)\n    // const [editForm, setEditForm] = useState({})\n    const [postRecipe, setPostRecipe] = useState(false)\n    const [recipe, setRecipe] = useState({\n        title: \"\",\n        ingredients: [],\n        method: [],\n        blog_id: b.id,\n        photo: \"\",\n        time: \"\",\n        servings: 0,\n    })\n  \n    function getBlogPost (b) {\n        scroll.scrollToTop();\n        navigate(`/${b.id}`)\n    }\n\n    function deletePost (e){\n        e.preventDefault()\n        fetch(`blogs/${b.id}`, {\n            method: \"DELETE\",\n        })\n        handleDelete(b.id)\n    }\n\n    function handleChange(e) {\n    const { name, value } = e.target \n    if (name === \"ingredients\" || name === \"method\") {\n        const valueArray = value.split(\"\\n\").filter((str) => str.trim() !== \"\");\n        setRecipe({ ...recipe, [name]: valueArray });\n      } else {\n        setRecipe({ ...recipe, [name]: value });\n      }\n    }\n\n    function handleSubmit(e) {\n        e.preventDefault()\n           fetch('/recipes', {\n           method: 'POST',\n           headers: { 'content-type': 'application/json' },\n           body: JSON.stringify({\n            title: recipe.title,\n            ingredients: recipe.ingredients,\n            blog_id: b.id,\n            method: recipe.method,\n            photo: recipe.photo,\n            time: recipe.time,\n            servings: recipe.servings\n           })\n        })\n           .then(r => {\n             if (r.status === 200){\n               r.json()\n               .then(data => rerender(data))\n           }\n           else if (r.status === 422) {\n               r.json()\n               .then(data => console.log(data.error))\n           }}\n            )\n       }\n\n    let me = currentUser && currentUser.email === \"angpace13@gmail.com\"\n\n    return (\n    \n                    \n                   <Container>\n                   {me?\n                    <div>\n                         <button className=\"btn btn-outline-secondary\" onClick={deletePost}>Delete</button>\n                         <button className=\"btn btn-outline-secondary\" onClick={() => setEdit(!edit)}>Edit</button>\n                         <button className=\"btn btn-outline-secondary\" onClick={() => setPostRecipe(!postRecipe)}>Add Recipe</button>\n                         </div>\n                        :\n                        <></>\n                     }\n                     {postRecipe? \n\n                     <div>\n                         <form onSubmit={handleSubmit}>\n                          <input \n                              onChange={handleChange}\n                              placeholder=\"Title\"\n                              name=\"title\"\n                          />\n                          <textarea\n                                onChange={handleChange}\n                                placeholder=\"Ingredients (one per line)\"\n                                name=\"ingredients\"\n                            />\n                            <textarea\n                                onChange={handleChange}\n                                placeholder=\"Method (one step per line)\"\n                                name=\"method\"\n                            /> \n                          <input \n                              onChange={handleChange}\n                              placeholder=\"Photo\"\n                              name=\"photo\"\n                          />\n                          <input \n                              onChange={handleChange}\n                              placeholder=\"Time\"\n                              name=\"time\"\n                          />\n                           <input \n                              onChange={handleChange}\n                              placeholder=\"Servings\"\n                              name=\"servings\"\n                          />\n                          <button className=\"btn btn-outline-secondary\" type=\"submit\">Post Recipe</button>\n                      </form> \n                     </div>\n\n                     :\n\n                     <></>\n\n                     }\n                        <BlogCardContainer onClick={() => getBlogPost(b)}>\n                            <ImgContainer>\n                                 <CardImage src={b.feature}></CardImage>\n                            </ImgContainer>\n                            <TitleandDate>\n                            <CardTitle>{b.title}</CardTitle>\n                            <CardDate>{b.date}</CardDate>\n                            </TitleandDate>\n                            <CardPreview>{b.preview}</CardPreview>\n                            <CardLikes>{b.likes} ❤️</CardLikes>\n                        </BlogCardContainer>    \n                        \n                    </Container>\n            \n             \n       \n       \n    )\n}\n\nexport default BlogCard;","import styled from \"styled-components\";\n\nexport const CategoryPage = styled.div`\nwidth: 80%;\nmargin: auto;\nmargin-top: 40px;\npadding-bottom: 5%;\n\n@media screen and (max-width: 600px){\n    width: 100%;\n}\n`\n\nexport const CategoryHeading = styled.h1`\npadding-top: 5%;\n\n@media screen and (max-width: 600px){\n    padding-left: 5%;\n}\n`\n\nexport const CardHolder = styled.div`\ndisplay: flex;\nflex-direction: column;\npadding-top: 20px;\nwidth:60%;\ngap: 10px;\n\n@media screen and (max-width: 700px){\n    margin: auto;\n    width: 90%;\n}\n\n`","import styled from \"styled-components\";\n\nexport const PostContainer = styled.div`\ndisplay: flex;\nflex-direction: column;\nmax-width: 80%;\nmargin: auto;\nmargin-top: 30px;\n\n`\nexport const Form = styled.form`\npadding-bottom: 7%;\ndisplay: flex;\nflex-direction: column;\nwidth: 90%;\nmargin: auto;\n`\n\n","import { useState, useRef } from 'react';\nimport toast, { Toaster } from 'react-hot-toast';\nimport { PostContainer, Form } from './PostElements';\n\nfunction PostBlog ({currentUser}) {\n    const form = useRef()\n    const [newPost, setNewPost] = useState({\n        title: \"\",\n        preview: \"\",\n        paragraph_one: \"\",\n        paragraph_two: \"\",\n        paragraph_three: \"\",\n        date: \"\",\n        feature: \"\",\n        image_one: \"\",\n        category: \"\",\n        featured: \"\",\n        keywords: \"\"\n    })\n    \n\n\n    function handleChange(e) {\n        const { name, value } = e.target \n        setNewPost({ ...newPost, [name]: value })\n    }\n\n \n\n    function handleSubmit(e) {\n        e.preventDefault()\n           fetch('/blogs', {\n           method: 'POST',\n           headers: { 'content-type': 'application/json' },\n           body: JSON.stringify({\n            title: newPost.title,\n            user_id: currentUser.id,\n            preview: newPost.preview,\n            paragraph_one: newPost.paragraph_one,\n            paragraph_two: newPost.paragraph_two,\n            paragraph_three: newPost.paragraph_three,\n            date: newPost.date,\n            feature: newPost.feature,\n            image_one: newPost.image_one,\n            category:  newPost.category,\n            featured: newPost.featured,\n            keywords: newPost.keywords,\n            likes: 0\n           })\n        })\n           .then(r => {\n             if (r.status === 200){\n               r.json()\n               .then(data => console.log(data))\n               .then(toast.success(\"Blog posted successfully\"))\n           }\n           else if (r.status === 422) {\n               r.json()\n               .then(data => console.log(data.error))\n           }}\n            )\n       }\n       \n\n    return (\n        \n        <PostContainer>\n            <Toaster\n                position=\"bottom-right\"\n                reverseOrder={false}\n            />\n            <h2>Post a New Blog</h2>   \n            <Form ref={form} onSubmit={handleSubmit}>\n                          <input\n                              onChange={handleChange}\n                              placeholder=\"Blog Title\"\n                              name=\"title\"\n                          />\n                          <input \n                              onChange={handleChange}\n                              placeholder=\"Preview\"\n                              name=\"preview\"\n                          />\n                          <input \n                              onChange={handleChange}\n                              placeholder=\"Date\"\n                              name=\"date\"\n                          />\n                          <input \n                              onChange={handleChange}\n                              placeholder=\"Feature\"\n                              name=\"feature\"\n                          />\n                          <input \n                              onChange={handleChange}\n                              placeholder=\"image\"\n                              name=\"image_one\"\n                          />\n                           <input \n                              onChange={handleChange}\n                              placeholder=\"Category\"\n                              name=\"category\"\n                          />\n                          <textarea\n                            rows=\"7\"\n                              onChange={handleChange}\n                              placeholder=\"Intro\"\n                              name=\"paragraph_one\"\n                          />\n                          <textarea\n                            rows=\"7\"\n                              onChange={handleChange}\n                              placeholder=\"Body\"\n                              name=\"paragraph_two\"\n                          />\n                          <textarea \n                            rows=\"7\"\n                              onChange={handleChange}\n                              placeholder=\"Conclusion\"\n                              name=\"paragraph_three\"\n                          />\n                           <textarea \n                                rows=\"7\"\n                              onChange={handleChange}\n                              placeholder=\"featured\"\n                              name=\"featured\"\n                          />\n                           <textarea\n                                rows=\"7\"\n                              onChange={handleChange}\n                              placeholder=\"Keywords\"\n                              name=\"keywords\"\n                          />\n                          <button type=\"submit\">Post Blog</button>\n                      </Form> \n        </PostContainer>\n    )\n}\n\nexport default PostBlog;\n\n","import styled from \"styled-components\";\n\nexport const NavbarContainer = styled.nav`\n  display: flex;\n  justify-content: space-between;\n  align-items: bottom;\n  padding: 12px;\n  padding-top: 0px;\n`;\n\nexport const NavItem = styled.div`\n  padding: 8px;\n  color: black;\n    text-decoration: none;\n    &:hover {\n      color: gray;\n    }\n`;\n\nexport const NavItem1 = styled.div`\n flex: 1;\n`;\n\n","import styled from \"styled-components\";\n\nexport const Title = styled.h3`\nfont-weight: bold;\nfont-size: 25px;\nflex: 1;\npadding: 8px;\ncolor: black;\n  text-decoration: none;\n  &:hover {\n    color: gray;\n  }\n \n`;","import Home from './pages/home/Home';\nimport './App.css';\nimport { Routes, Route} from \"react-router-dom\";\nimport Login from './pages/SubscribeandLogin/Login'\nimport { useEffect, useState } from 'react';\nimport BlogLay from './components/BlogLay/BlogLay';\nimport Manage from './pages/SubscribeandLogin/Manage';\nimport Subscribe from './pages/SubscribeandLogin/Subscribe'\nimport toast, { Toaster } from 'react-hot-toast';\nimport About from \"./pages/About/About\"\nimport Footer from './components/Footer/Footer';\nimport Contact from './pages/Contact/Contact';\nimport Category from './components/Category/Category';\nimport PostBlog from './pages/Post/PostBlog';\nimport Nav from './components/NewNav/Nav.js';\n\n\nfunction App() {\n  const [currentUser, setCurrentUser] = useState(null)\n  const [search, setSearch] = useState(\"\")\n\n  \n  useEffect(() => {\n    fetch(`/me`)\n    .then (r =>{\n      if (r.ok) {\n        r.json().then(user => setCurrentUser(user))\n      }\n    })\n  }, [])\n  \n  function handleLogOut(e) {\n    e.preventDefault()\n    fetch('/logout', {\n      method: \"DELETE\"\n    }).then(r => {\n      if (r.ok) {\n        setCurrentUser(null)\n      }\n    })\n    toast(`See you soon!`, {\n      icon: '👋'\n    })\n  }\n\n  function onLogin(user) {\n    setCurrentUser(user)\n    toast(`Welcome, ${user.name}!`, {\n      icon: '👋',\n    })\n  }\n\n\n  return (\n    <div >\n      <Toaster\n              position=\"bottom-right\"\n              reverseOrder={false}\n            />\n\n            <Nav currentUser={currentUser} handleLogOut={handleLogOut} setSearch={setSearch} />\n\n       {/* <Navbar currentUser={currentUser} handleLogOut={handleLogOut} setSearch={setSearch}/> */}\n  \n        \n\n        {/* Routes */}\n        <Routes>\n          <Route exact path=\"/\" element={<Home search={search} setSearch={setSearch} currentUser={currentUser}/>} />\n          <Route exact path=\"/about\" element={<About/>}/>\n          <Route exact path=\"/contact\" element={<Contact/>}/>\n          <Route exact path=\"/post\" element={<PostBlog currentUser={currentUser}/>} />\n          <Route path=\"/blogs/:id\" element={<Category/>} />\n          <Route path=\"/login\" element={<Login onLogin={onLogin}/>} />\n          <Route path=\"/:id\" element={<BlogLay currentUser={currentUser}/>} />\n          <Route path=\"/subscribe\" element={<Subscribe/>} />\n          <Route path=\"/your_account\" element={<Manage currentUser={currentUser} toast={toast} Toaster={Toaster}/>} />\n          </Routes>\n      \n      <Footer/>\n    </div>\n  );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import styled from 'styled-components';\n\nexport const ConstructionPage = styled.div`\n   /* background-color: whitesmoke; */\n   display: flex;\n   max-height: 650px;\n   /* overflow-y: scroll; */\n   width: 100%;\n   /* background-color: #fffef2; */\n   /* border-top: thin solid; */\n\n   @media screen and (max-width: 900px){\n    flex-direction: column;\n    max-height: 100%;\n    padding: 2px;\n    margin-top: 30px;\n}\n`\n\nexport const ContentContainer = styled.div`\nwidth: 55%;\nmax-height: 650px;\n   overflow-y: scroll;\nalign-items: center;\n/* padding-bottom: 2px; */\n\n\n@media screen and (max-width: 900px){\n    width: 95%;\n    /* height: 100%;\n    overflow-y: inherit; */\n   \n}\n`\n\nexport const Content = styled.h1`\nfont-size: 30px;\ncolor: black;\npadding: 7% 0% 0% 4%;\n\n\n`\nexport const ImageContainer = styled.div`\nleft: 40%;\nwidth: 40%;\noverflow: hidden;\nborder-right: thin solid;\n\n@media screen and (max-width: 900px){\n    width: 100%;\n    height: 00px;\n    visibility: hidden;\n}\n`\nexport const Image = styled.img`\nwidth: 100%;\nmin-height: 100%;\n\n@media screen and (max-width: 900px){\n    height: 600px;\n}\n\n`\n","import React from 'react'\nimport { ConstructionPage, ContentContainer, Content } from './UnderCElements'\n\n\nconst UnderConstruction = () => {\n  return (\n    <ConstructionPage>\n        <ContentContainer>\n          <Content>Hello, there. Thanks for visiting Kitchen and Code! <br/>\n          <br/>\n           The site is currently under construction. In the meantime, feel free to visit \n            my <a href='https://angelapace.tech/'>Portfolio</a>.</Content>\n        </ContentContainer>\n          \n        {/* <ImageContainer>\n          <Image src={img}></Image>\n        </ImageContainer> */}\n        </ConstructionPage>\n  )\n}\n\nexport default UnderConstruction","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\nimport { BrowserRouter } from \"react-router-dom\";\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport UnderConstruction from './components/Construction/UnderConstruction';\n\n\nReactDOM.render(\n  <React.StrictMode>\n     <BrowserRouter>\n      <UnderConstruction/>\n       {/* <App/> */}\n    </BrowserRouter>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}