landing page gpt 2

import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import axios from 'axios';
import { Card, CardBody, CardHeader, CardFooter, Typography } from '@material-tailwind/react';
import { TbCurrencyRupeeNepalese } from 'react-icons/tb';
import { BiMap } from 'react-icons/bi';
import Navbar from './Navbar';

function LandingPage() {
  const { user } = useSelector((state) => state);
  const [posts, setPosts] = useState([]);
  const [recommendedPosts, setRecommendedPosts] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:8000/post/').then((response) => {
      setPosts(response.data);
    });

    axios.get(`http://localhost:8000/recommendation/${user.userState.id}`).then((response) => {
      setRecommendedPosts(response.data);
    });
  }, [user]);

  return (
    <div>
      <Navbar />
      <div className="container mx-auto px-4 py-8">
        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {posts.map((post) => (
            <Card key={post.id}>
              <CardHeader color="blue" className="relative h-56">
                <img src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fhouses%2F&psig=AOvVaw0Y4vxWl-iqPSGZNeng5MI1&ust=1683309597455000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCICDmoaf3P4CFQAAAAAdAAAAABAE" alt="" className="h-full w-full object-cover" />
              </CardHeader>
              <CardBody className="text-center">
                <Typography variant="h5" className="mb-2 text-left">
                  {post.title}
                </Typography>
                <Typography className="text-left">
                  {post.content.length > 100 ? post.content.slice(0, 100) + '...' : post.content}
                </Typography>
              </CardBody>
              <CardFooter divider className="flex items-center justify-between py-3">
                <div className="flex items-center gap-1">
                  <TbCurrencyRupeeNepalese />
                  <Typography>{post.price}</Typography>
                </div>
                <Typography variant="small" color="gray" className="flex gap-1 items-center">
                  <BiMap />
                  <Typography>{post.location.split(',').at(-3)}</Typography>
                </Typography>
              </CardFooter>
            </Card>
          ))}
        </div>

        <div className="mt-12">
          <Typography variant="h3" className="mb-4">
            Recommended Posts
          </Typography>

          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {recommendedPosts.map((post) => (
              <Card key={post.id}>
                <CardHeader color="blue" className="relative h-56">
                  <img src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fhouses%2F&psig=AOvVaw0Y4vxWl-iqPSGZNeng5MI1&ust=1683309597455000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCICDmoaf3P4CFQAAAAAdAAAAABAE" alt="" className="h-full w-full object-cover" />
                </CardHeader>
                <CardBody className="text-center">
                  <Typography variant="h5" className="mb-2 text-left">
                    {post.title}
                  </Typography>
                  <Typography className="text-left">
                    {post.content.length > 100 ? post.content.slice(0, 100) + '...' : post.content}
                  </Typography>
                </CardBody>
                <CardFooter divider className="flex items-center justify-between py-3">
                <div className="flex items-center gap-1">
                  <TbCurrencyRupeeNepalese />
                  <Typography>{post.price}</Typography>
                </div>
                <Typography variant="small" color="gray" className="flex gap-1 items-center">
                  <BiMap />
                  <Typography>{post.location.split(',').at(-3)}</Typography>
                </Typography>
              </CardFooter>
            </Card>
          ))}
        </div>
        </div>
      </div>
      </div>
  )}

  export default LandingPage