Next.js Instagram Webapp. - A ShareGPT conversation

Model: GPT-4

I'm going to develop a simple instagram like webapp with next.js. Tab Bar layout, modern ui/ux style. give me step by step guide with code example. Answer in English.

Developing an Instagram-like web app with Next.js involves several steps. Here's a step-by-step guide with code examples to help you create a simple web app.

Set up your development environment:

Install Node.js (https://nodejs.org/en/download/)
Install npm or yarn
Install a code editor, such as Visual Studio Code

Create a new Next.js project:

bashCopy code
npx create-next-app instagram-clone
cd instagram-clone

Install required dependencies:

bashCopy code
npm install --save react-icons styled-components @emotion/react @emotion/styled

Create a custom _app.js file:

Create a new file at pages/_app.js
Add the following content:

javascriptCopy code
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Design the tab bar layout and modern UI/UX style:

Create a components folder in your project root.
Inside the components folder, create a TabBar.js file:

javascriptCopy code
import React from 'react';
import styled from '@emotion/styled';
import { FiHome, FiSearch, FiPlusSquare, FiHeart, FiUser } from 'react-icons/fi';

const TabBarContainer = styled.div`
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  height: 60px;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
`;

const TabIcon = styled.div`
  font-size: 24px;
  color: #555;
`;

const TabBar = () => {
  return (
    <TabBarContainer>
      <TabIcon>
        <FiHome />
      </TabIcon>
      <TabIcon>
        <FiSearch />
      </TabIcon>
      <TabIcon>
        <FiPlusSquare />
      </TabIcon>
      <TabIcon>
        <FiHeart />
      </TabIcon>
      <TabIcon>
        <FiUser />
      </TabIcon>
    </TabBarContainer>
  );
};

export default TabBar;

Add the TabBar component to your main page:

Open the pages/index.js file and update its content as follows:

javascriptCopy code
import Head from 'next/head';
import TabBar from '../components/TabBar';

export default function Home() {
  return (
    <div>
      <Head>
        <title>Instagram Clone</title>
        <meta name="description" content="Simple Instagram Clone using Next.js" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        {/* Your main content goes here */}
      </main>

      <TabBar />
    </div>
  );
}

Now, you have a simple Instagram-like web app with a tab bar layout and a modern UI/UX style. You can further build on this foundation by adding features like authentication, image uploading, and displaying posts.

Remember to start the development server by running npm run dev or yarn dev and open your browser to http://localhost:3000 to see your app in action.

I also want to add following tabs with simple features. suggest each tab and it's feature list. Answer in English.

Here's a suggested list of tabs and their respective features:

Home Tab:

Display a feed of posts from users the current user follows.
Allow users to like and unlike posts.
Display the number of likes and comments on each post.
Provide the ability to add comments to a post.
Display the timestamp of the post.

Explore Tab:

Display a grid of photos and videos from various users.
Implement an infinite scroll to load more content as the user scrolls.
Add a search bar to search for specific users or hashtags.
Show trending tags and user recommendations.

New Post Tab:

Allow users to capture or upload a photo or video.
Provide basic photo editing features like cropping, filters, and adjustments.
Let users add a caption, location, and tag other users in the post.
Allow users to share the post on other social media platforms.

Activity Tab:

Display recent activity related to the current user, such as likes, comments, and new followers.
Show notifications for user mentions in other posts.
Allow users to switch between "Following" and "You" sections to view activity from users they follow.

Profile Tab:

Display the current user's profile picture, username, and bio.
Show the number of posts, followers, and followings for the current user.
Allow users to edit their profile information.
Display a grid of the user's posts.
Provide options to switch between grid view and list view of posts.
Implement a "Saved" section to display posts the user has saved.

These tabs and features provide a solid foundation for an Instagram-like web app. You can build on this foundation by adding more advanced features such as messaging, stories, and shopping integration.

I'll implement each simple tab pages and switch tab page with next.js routing system. give me the code example

To implement tab pages and switch between them using the Next.js routing system, you'll need to create separate pages for each tab and update the TabBar.js component to include links to those pages. Here's a code example:

Create the page files for each tab in the pages folder:

home.js
explore.js
new-post.js
activity.js
profile.js

For simplicity, you can start with placeholder content in each page:

javascriptCopy code
// home.js, explore.js, new-post.js, activity.js, profile.js
import TabBar from '../components/TabBar';

export default function Home() {
  return (
    <div>
      <h1>Home Page</h1> {/* Change this text for each page */}
      <TabBar />
    </div>
  );
}

Update the TabBar.js component to include Next.js links:

javascriptCopy code
import React from 'react';
import styled from '@emotion/styled';
import { FiHome, FiSearch, FiPlusSquare, FiHeart, FiUser } from 'react-icons/fi';
import Link from 'next/link';

const TabBarContainer = styled.div`
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  height: 60px;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
`;

const TabIcon = styled.div`
  font-size: 24px;
  color: #555;
`;

const TabBar = () => {
  return (
    <TabBarContainer>
      <Link href="/home">
        <TabIcon>
          <FiHome />
        </TabIcon>
      </Link>
      <Link href="/explore">
        <TabIcon>
          <FiSearch />
        </TabIcon>
      </Link>
      <Link href="/new-post">
        <TabIcon>
          <FiPlusSquare />
        </TabIcon>
      </Link>
      <Link href="/activity">
        <TabIcon>
          <FiHeart />
        </TabIcon>
      </Link>
      <Link href="/profile">
        <TabIcon>
          <FiUser />
        </TabIcon>
      </Link>
    </TabBarContainer>
  );
};

export default TabBar;

Now, the tab bar will navigate to different pages when the icons are clicked. Remember to remove the previous pages/index.js file and set up a redirect from / to /home in pages/_app.js:

javascriptCopy code
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    if (router.pathname === '/') {
      router.replace('/home');
    }
  }, [router]);

  return <Component {...pageProps} />;
}

export default MyApp;

With these changes, you'll have a simple tab-based navigation system using Next.js routing. You can start implementing each tab's features within their respective page files.

Write a home.js for Add Home tab with modern ui/ux style. - write also api code if necessary

To create the home.js page for the Home tab with a modern UI/UX style, follow these steps:

Update the home.js file with a new layout and styles:

javascriptCopy code
import React, { useState, useEffect } from 'react';
import styled from '@emotion/styled';
import TabBar from '../components/TabBar';

const Feed = styled.div`
  margin: 0 auto;
  max-width: 600px;
  padding: 20px 0;
`;

const Post = styled.div`
  background-color: white;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
`;

const PostHeader = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid #efefef;
`;

const User = styled.div`
  display: flex;
  align-items: center;
`;

const Avatar = styled.img`
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
`;

const Username = styled.span`
  font-weight: 600;
`;

const PostImage = styled.img`
  width: 100%;
  height: auto;
`;

const PostActions = styled.div`
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #efefef;
`;

const ActionButton = styled.button`
  background: none;
  border: none;
  font-size: 20px;
  margin-right: 15px;
  cursor: pointer;
`;

const Home = () => {
  const [posts, setPosts] = useState([]);

  // Replace this function with a real API call
  useEffect(() => {
    // Fetch posts from API here
    const fetchPosts = async () => {
      const dummyPosts = [
        {
          id: 1,
          user: {
            username: 'user1',
            avatar: 'https://via.placeholder.com/32',
          },
          imageUrl: 'https://via.placeholder.com/600x400',
        },
        {
          id: 2,
          user: {
            username: 'user2',
            avatar: 'https://via.placeholder.com/32',
          },
          imageUrl: 'https://via.placeholder.com/600x400',
        },
      ];

      setPosts(dummyPosts);
    };

    fetchPosts();
  }, []);

  return (
    <div>
      <Feed>
        {posts.map((post) => (
          <Post key={post.id}>
            <PostHeader>
              <User>
                <Avatar src={post.user.avatar} alt={post.user.username} />
                <Username>{post.user.username}</Username>
              </User>
            </PostHeader>
            <PostImage src={post.imageUrl} alt="Post" />
            <PostActions>
              <ActionButton>❤️</ActionButton>
              <ActionButton>💬</ActionButton>
              <ActionButton>🔗</ActionButton>
            </PostActions>
          </Post>
        ))}
      </Feed>
      <TabBar />
    </div>
  );
};

export default Home;

This code creates a simple Home tab page with a modern UI/UX style. The posts are displayed in a feed with a user avatar, username, and image. The layout also includes action buttons for liking, commenting

Write a explore.js for Explore tab with modern ui/ux style. remember following features: - Display a grid of photos and videos from various users. - Implement an infinite scroll to load more content as the user scrolls. - Add a search bar to search for specific users or hashtags. - Show trending tags and user recommendations.

To create the explore.js page for the Explore tab with a modern UI/UX style, follow these steps:

Install the react-infinite-scroll-component package:

bashCopy code
npm install react-infinite-scroll-component

Update the explore.js file with a new layout and styles:

javascriptCopy code
import React, { useState, useEffect } from 'react';
import styled from '@emotion/styled';
import TabBar from '../components/TabBar';
import InfiniteScroll from 'react-infinite-scroll-component';

const Container = styled.div`
  padding: 20px;
`;

const SearchBar = styled.input`
  display: block;
  width: 100%;
  padding: 12px 20px;
  margin: 0 0 20px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
`;

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: 4px;
`;

const GridItem = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
`;

const Explore = () => {
  const [images, setImages] = useState([]);
  const [hasMore, setHasMore] = useState(true);

  // Replace this function with a real API call
  const fetchImages = async () => {
    const newImages = [
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
    ];

    setImages((prevImages) => [...prevImages, ...newImages]);

    // Set 'hasMore' to false when there are no more images to load
    // setHasMore(false);
  };

  const handleSearch = (event) => {
    console.log('Search:', event.target.value);
    // Implement search functionality here
  };

  useEffect(() => {
    fetchImages();
  }, []);

  return (
    <div>
      <Container>
        <SearchBar
          type="text"
          placeholder="Search for users or hashtags..."
          onChange={handleSearch}
        />
        <InfiniteScroll
          dataLength={images.length}
          next={fetchImages}
          hasMore={hasMore}
          loader={<h4>Loading...</h4>}
        >
          <Grid>
            {images.map((image, index) => (
              <GridItem key={index} src={image} alt="Thumbnail" />
            ))}
          </Grid>
        </InfiniteScroll>
      </Container>
      <TabBar />
    </div>
  );
};

export default Explore;

This code creates a simple Explore tab page with a modern UI/UX style. It displays a grid of photos and videos from various users and implements an infinite scroll to load more content as the user scrolls. There's a search bar to search for specific users or hashtags. Note that the search functionality, fetching images, and trending tags or user recommendations should be implemented using your API.

Remember to replace the fetchImages function with a real API call to fetch images and update the handleSearch function to perform the search using your API.

can you fill out following codes with test data? // Set 'hasMore' to false when there are no more images to load // setHasMore(false); Answer in English.

Sure! Here's how you can modify the fetchImages function to simulate loading more images and setting hasMore to false when there are no more images to load. We'll be using test data to demonstrate this behavior:

javascriptCopy code
const Explore = () => {
  const [images, setImages] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(0);

  // Replace this function with a real API call
  const fetchImages = async () => {
    const totalPages = 3;
    const pageSize = 9;
    const allImages = [
      ...Array(pageSize * totalPages)
    ].map((_, index) => `https://via.placeholder.com/150?text=${index + 1}`);

    if (page < totalPages) {
      const newImages = allImages.slice(page * pageSize, (page + 1) * pageSize);
      setImages((prevImages) => [...prevImages, ...newImages]);
      setPage(page + 1);
    } else {
      setHasMore(false);
    }
  };

  const handleSearch = (event) => {
    console.log('Search:', event.target.value);
    // Implement search functionality here
  };

  useEffect(() => {
    fetchImages();
  }, []);

  // ...
};

In this example, we have a fixed number of totalPages and a fixed pageSize. The allImages array contains all the test images we want to load. We slice the allImages array according to the current page and pageSize to simulate the loading of new images. We increment the page after loading new images. When the current page reaches totalPages, we set hasMore to false, indicating there are no more images to load.

Keep in mind that this example uses test data. In a real application, you should fetch images from an API and determine whether there are more images to load based on the API response.

I also want to implement global search through search api with test data.

To implement a global search feature with test data, you can create a new state for search results and update it when the user types in the search bar. Here's an example of how you can implement this in the explore.js file:

Add new states for search results and the search query:

javascriptCopy code
const [searchResults, setSearchResults] = useState([]);
const [searchQuery, setSearchQuery] = useState('');

Update the handleSearch function to search for test data:

javascriptCopy code
const handleSearch = (event) => {
  const query = event.target.value;
  setSearchQuery(query);

  if (query.trim()) {
    // Replace this with a real API call
    const testUsers = [
      { username: 'john_doe', name: 'John Doe' },
      { username: 'jane_doe', name: 'Jane Doe' },
      { username: 'bill_smith', name: 'Bill Smith' },
    ];

    const testHashtags = ['#nature', '#photography', '#travel'];

    const filteredUsers = testUsers.filter((user) =>
      user.username.toLowerCase().includes(query.toLowerCase())
    );

    const filteredHashtags = testHashtags.filter((hashtag) =>
      hashtag.toLowerCase().includes(query.toLowerCase())
    );

    setSearchResults([...filteredUsers, ...filteredHashtags]);
  } else {
    setSearchResults([]);
  }
};

In this example, we use test data for users and hashtags. When the user types in the search bar, we filter the test data based on the search query and update the searchResults state. Remember to replace the test data and filtering logic with an actual API call in a real application.

Display the search results:

Add a new styled component for search results:

javascriptCopy code
const SearchResultList = styled.ul`
  position: absolute;
  background-color: white;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  max-height: 200px;
  overflow-y: scroll;
`;

const SearchResultItem = styled.li`
  padding: 8px 16px;
  cursor: pointer;

  &:hover {
    background-color: #f1f1f1;
  }
`;

Update the JSX to include the search results:

javascriptCopy code
<SearchBar
  type="text"
  placeholder="Search for users or hashtags..."
  value={searchQuery}
  onChange={handleSearch}
/>
{searchResults.length > 0 && (
  <SearchResultList>
    {searchResults.map((result, index) => (
      <SearchResultItem key={index}>
        {typeof result === 'string' ? result : result.username}
      </SearchResultItem>
    ))}
  </SearchResultList>
)}

Now, when the user types in the search bar, the search results will be displayed in a dropdown list. Keep in mind that this example uses test data and should be replaced with an actual API call in a real application.

Write a new_post.js for NewPost tab with modern ui/ux style. remember following features:- Allow users to capture or upload a photo or video.- Provide basic photo editing features like cropping, filters, and adjustments.- Let users add a caption, location, and tag other users in the post.- Allow users to share the post on other social media platforms. 번역결과 Write a new_post.js for NewPost tab with modern ui/ux style. remember following features:- Allow users to capture or upload a photo or video.- Provide basic photo editing features like cropping, filters, and adjustments.- Let users add a caption, location, and tag other users in the post.- Allow users to share the post on other social media platforms.

To create the new_post.js page for the NewPost tab with a modern UI/UX style, follow these steps:

Install the react-image-crop package for cropping images and the react-icons package for using social media icons:

bashCopy code
npm install react-image-crop
npm install react-icons

Update the new_post.js file with a new layout and styles:

javascriptCopy code
import React, { useState } from 'react';
import styled from '@emotion/styled';
import TabBar from '../components/TabBar';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
import { FaFacebookF, FaTwitter, FaInstagram } from 'react-icons/fa';

const Container = styled.div`
  padding: 20px;
`;

const Form = styled.form``;

const Input = styled.input`
  display: block;
  width: 100%;
  padding: 12px 20px;
  margin: 0 0 20px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
`;

const Label = styled.label`
  display: block;
  margin-bottom: 5px;
`;

const Button = styled.button`
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
`;

const SocialShare = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
`;

const SocialIcon = styled.div`
  color: #fff;
  background-color: #3b5998;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  cursor: pointer;
  transition: background-color 0.2s;

  &:last-child {
    margin-right: 0;
  }

  &:hover {
    background-color: #4c70ba;
  }
`;

const NewPost = () => {
  const [file, setFile] = useState(null);
  const [crop, setCrop] = useState({ aspect: 1 });
  const [croppedImage, setCroppedImage] = useState(null);

  const onFileChange = (e) => {
    if (e.target.files && e.target.files.length > 0) {
      const reader = new FileReader();
      reader.addEventListener('load', () => setFile(reader.result));
      reader.readAsDataURL(e.target.files[0]);
    }
  };

  const onImageLoaded = (image) => {
    setCroppedImage(image);
  };

  const onCropComplete = (crop) => {
    if (croppedImage && crop.width && crop.height) {
      // Implement image cropping logic here
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Implement the rest of the form submission logic here
  };

  const handleSocialShare = (platform) => {
    // Implement social sharing logic here
  };

  return (
    <div>
      <Container>
        <Form onSubmit={handleSubmit}>
          <Label htmlFor="file-input">Upload a photo or video:</Label>
          <Input
            type="file"
            id="file-input"
            accept="image/*,

continue with makdown output (from return (

video/*" onChange={onFileChange} /> {file && ( <ReactCrop src={file} crop={crop} onChange={(newCrop) => setCrop(newCrop)} onImageLoaded={onImageLoaded} onComplete={onCropComplete} /> )} <Label htmlFor="caption">Caption:</Label> <Input type="text" id="caption" placeholder="Write a caption..." /> <Label htmlFor="location">Location:</Label> <Input type="text" id="location" placeholder="Add a location..." /> <Label htmlFor="tags">Tag Users:</Label> <Input type="text" id="tags" placeholder="Tag users by their username..." /> <Button type="submit">Post</Button> </Form> <SocialShare> <SocialIcon onClick={() => handleSocialShare('facebook')}> <FaFacebookF /> </SocialIcon> <SocialIcon onClick={() => handleSocialShare('twitter')}> <FaTwitter /> </SocialIcon> <SocialIcon onClick={() => handleSocialShare('instagram')}> <FaInstagram /> </SocialIcon> </SocialShare> </Container> <TabBar /> </div> ); };

export default NewPost;

cssCopy code

This code creates a simple NewPost tab page with a modern UI/UX style. It allows users to capture or upload a photo or video, provides basic photo editing features like cropping, and lets users add a caption, location, and tag other users in the post. It also allows users to share the post on other social media platforms like Facebook, Twitter, and Instagram.

Remember to implement the image cropping logic, form submission logic, and social sharing functionality as needed for your application.

Write a activity.js for Activity tab with modern ui/ux style. remember following features: - Display recent activity related to the current user, such as likes, comments, and new followers. - Show notifications for user mentions in other posts. - Allow users to switch between "Following" and "You" sections to view activity from users they follow.

To create the activity.js page for the Activity tab with a modern UI/UX style, follow these steps:

Create a new layout and styles in the activity.js file:

javascriptCopy code
import React, { useState } from 'react';
import styled from '@emotion/styled';
import TabBar from '../components/TabBar';

const Container = styled.div`
  padding: 20px;
`;

const ActivityTabs = styled.div`
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
`;

const Tab = styled.button`
  padding: 10px;
  font-size: 18px;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  color: ${(props) => (props.active ? '#000' : '#ccc')};
  font-weight: ${(props) => (props.active ? 'bold' : 'normal')};

  &:hover {
    color: #000;
  }
`;

const ActivityList = styled.ul`
  list-style: none;
  padding: 0;
`;

const ActivityItem = styled.li`
  display: flex;
  align-items: center;
  margin-bottom: 20px;
`;

const Avatar = styled.img`
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
`;

const ActivityContent = styled.div``;

const Activity = () => {
  const [activeTab, setActiveTab] = useState('you');
  const [activities] = useState([
    { type: 'like', user: 'john_doe', content: 'liked your post.' },
    { type: 'comment', user: 'jane_doe', content: 'commented on your post.' },
    { type: 'follow', user: 'bill_smith', content: 'started following you.' },
    { type: 'mention', user: 'sarah_parker', content: 'mentioned you in a post.' },
  ]);

  const filteredActivities = activities.filter((activity) => {
    if (activeTab === 'you') {
      return true;
    }
    return activity.type !== 'mention';
  });

  return (
    <div>
      <Container>
        <ActivityTabs>
          <Tab
            active={activeTab === 'you'}
            onClick={() => setActiveTab('you')}
          >
            You
          </Tab>
          <Tab
            active={activeTab === 'following'}
            onClick={() => setActiveTab('following')}
          >
            Following
          </Tab>
        </ActivityTabs>
        <ActivityList>
          {filteredActivities.map((activity, index) => (
            <ActivityItem key={index}>
              <Avatar src={`https://via.placeholder.com/150?text=${activity.user}`} />
              <ActivityContent>
                <strong>{activity.user}</strong> {activity.content}
              </ActivityContent>
            </ActivityItem>
          ))}
        </ActivityList>
      </Container>
      <TabBar />
    </div>
  );
};

export default Activity;

This code creates a simple Activity tab page with a modern UI/UX style. It displays recent activity related to the current user, such as likes, comments, and new followers. It also shows notifications for user mentions in other posts. Users can switch between "Following" and "You" sections to view activity from users they follow.

Keep in mind that this example uses hardcoded test data for activities. In a real application, you should fetch activities from an API and update the activities state based on the API response.

Write a profile.js for Profile tab with modern ui/ux style. remember following features: - Display the current user's profile picture, username, and bio. - Show the number of posts, followers, and followings for the current user. - Allow users to edit their profile information. - Display a grid of the user's posts. - Provide options to switch between grid view and list view of posts. - Implement a "Saved" section to display posts the user has saved.

To create the profile.js page for the Profile tab with a modern UI/UX style, follow these steps:

Create a new layout and styles in the profile.js file:

javascriptCopy code
import React, { useState } from 'react';
import styled from '@emotion/styled';
import TabBar from '../components/TabBar';

const Container = styled.div`
  padding: 20px;
`;

const ProfileHeader = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: 20px;
`;

const Avatar = styled.img`
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 20px;
`;

const UserInfo = styled.div``;

const Username = styled.h2`
  margin: 0;
`;

const Bio = styled.p`
  margin: 0;
`;

const Stats = styled.ul`
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
`;

const StatItem = styled.li`
  margin-right: 20px;

  &:last-child {
    margin-right: 0;
  }
`;

const StatValue = styled.strong`
  display: block;
`;

const StatLabel = styled.span``;

const EditProfileButton = styled.button`
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 10px 0;
  cursor: pointer;
  border-radius: 4px;
`;

const PostTabs = styled.div`
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
`;

const Tab = styled.button`
  padding: 10px;
  font-size: 18px;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  color: ${(props) => (props.active ? '#000' : '#ccc')};
  font-weight: ${(props) => (props.active ? 'bold' : 'normal')};

  &:hover {
    color: #000;
  }
`;

const Posts = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
`;

const Post = styled.img`
  width: 100%;
  object-fit: cover;
`;

const Profile = () => {
  const [activeTab, setActiveTab] = useState('posts');

  const handleEditProfile = () => {
    // Implement edit profile logic here
  };

  return (
    <div>
      <Container>
        <ProfileHeader>
          <Avatar src="https://via.placeholder.com/150" />
          <UserInfo>
            <Username>john_doe</Username>
            <Bio>Photographer and traveler</Bio>
            <Stats>
              <StatItem>
                <StatValue>150</StatValue>
                <StatLabel>Posts</StatLabel>
              </StatItem>
              <StatItem>
                <StatValue>300</StatValue>
                <StatLabel>Followers</StatLabel>
              </StatItem>
              <StatItem>
                <StatValue>200</StatValue>
                <StatLabel>Following</StatLabel>
              </StatItem>
            </Stats>
            <EditProfileButton onClick={handleEditProfile}>
              Edit Profile
            </EditProfileButton>
          </UserInfo>
        </ProfileHeader>
        <PostTabs

continue

phpCopy code
    <PostTabs>
      <Tab
        active={activeTab === 'posts'}
        onClick={() => setActiveTab('posts')}
      >
        Posts
      </Tab>
      <Tab
        active={activeTab === 'saved'}
        onClick={() => setActiveTab('saved')}
      >
        Saved
      </Tab>
    </PostTabs>
    {activeTab === 'posts' && (
      <Posts>
        {/* Replace the src attribute with the user's actual post image URLs */}
        <Post src="https://via.placeholder.com/300" />
        <Post src="https://via.placeholder.com/300" />
        <Post src="https://via.placeholder.com/300" />
        {/* Add more posts as needed */}
      </Posts>
    )}
    {activeTab === 'saved' && (
      <Posts>
        {/* Replace the src attribute with the user's actual saved post image URLs */}
        <Post src="https://via.placeholder.com/300" />
        <Post src="https://via.placeholder.com/300" />
        <Post src="https://via.placeholder.com/300" />
        {/* Add more saved posts as needed */}
      </Posts>
    )}
  </Container>
  <TabBar />
</div>

); };

export default Profile;

vbnetCopy code

This code creates a simple Profile tab page with a modern UI/UX style. It displays the current user's profile picture, username, and bio. It shows the number of posts, followers, and followings for the current user. Users can edit their profile information, and the page displays a grid of the user's posts. It also provides options to switch between the grid view and saved posts view.

Keep in mind that this example uses hardcoded test data for the user profile and posts. In a real application, you should fetch the user profile and posts from an API and update the profile state based on the API response.