Skip to content

Commit

Permalink
Merge pull request #49 from sanam2405/feed
Browse files Browse the repository at this point in the history
feed ui init
  • Loading branch information
sanam2405 authored Apr 30, 2024
2 parents a61b33f + e2f62f7 commit 4f19da8
Show file tree
Hide file tree
Showing 15 changed files with 263 additions and 34 deletions.
57 changes: 37 additions & 20 deletions ts-frontend/index.html
Original file line number Diff line number Diff line change
@@ -1,24 +1,41 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="public/images/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Courier+Prime&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Courier+Prime:ital@0;1&display=swap"
rel="stylesheet"
/>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link
rel="icon"
type="image/x-icon"
href="/favicon.ico"
/>
<link
rel="preconnect"
href="https://fonts.googleapis.com"
/>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin
/>
<link
href="https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Courier+Prime&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Courier+Prime:ital@0;1&display=swap"
rel="stylesheet"
/>

<title>Privacy Network</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
<title>Privacy Network</title>
</head>
<body>
<div id="root"></div>
<script
type="module"
src="/src/main.tsx"
></script>
</body>
</html>
50 changes: 39 additions & 11 deletions ts-frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions ts-frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"@types/react-icons": "^3.0.0",
"@types/react-loader-spinner": "^4.0.0",
"@types/react-router-dom": "^5.3.3",
"@types/swiper": "^6.0.0",
"jwt-decode": "^4.0.0",
"lodash": "^4.17.21",
"prettier": "^3.1.1",
Expand Down
File renamed without changes.
Binary file added ts-frontend/public/rp.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ts-frontend/public/sanam.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
7 changes: 6 additions & 1 deletion ts-frontend/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-var-requires */
import "./App.css";
import { useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import { GoogleOAuthProvider } from "@react-oauth/google";
import Signup from "./pages/Signup";
import Login from "./pages/Login";
Expand All @@ -10,6 +10,7 @@ import Client from "./pages/Client";
import LogoutModal from "./components/LogoutModal";
import { LoginContext } from "./context/LoginContext";
import { Socket } from "./components/Socket";
import { Feed } from "./pages/Feed";
// import 'dotenv/config';

// require('dotenv').config()
Expand All @@ -35,8 +36,10 @@ function App() {
<Route path="/" element={<Signup />} />
<Route path="/auth" element={<Login />} />
<Route path="/dashboard" element={<FriendsPage />} />
<Route path="/feed" element={<Feed />} />
<Route path="/map" element={<Client />} />
<Route path="/socket" element={<Socket />} />
<Route path="*" element={<Navigate to="/auth" />} />
</Routes>
</BrowserRouter>
{modalOpen ? <LogoutModal /> : ""}
Expand All @@ -51,8 +54,10 @@ function App() {
<Route path="/" element={<Signup />} />
<Route path="/auth" element={<Login />} />
<Route path="/dashboard" element={<FriendsPage />} />
<Route path="/feed" element={<Feed />} />
<Route path="/map" element={<Client />} />
<Route path="/socket" element={<Socket />} />
<Route path="*" element={<Navigate to="/auth" />} />
</Routes>
</BrowserRouter>
{modalOpen ? <LogoutModal /> : ""}
Expand Down
89 changes: 89 additions & 0 deletions ts-frontend/src/components/Carousal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { FC, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Scrollbar } from "swiper/modules";
import "swiper/swiper-bundle.css";
import { CardHeader, CardMedia, CardContent, CardActions } from "@mui/material";
import { Avatar, IconButton, Typography } from "@mui/material";
import { Favorite, MoreVert } from "@mui/icons-material";
import CommentIcon from "@mui/icons-material/Comment";
import ShareIcon from "@mui/icons-material/Share";
import { monthOfTheYear } from "../constants";
import CarousalCSS from "../styles/Carousal.module.css";

const images = ["/sanam.jpg", "rp.jpg"];
const avatarImage = "/rimjhim.svg";

export const Carousal: FC = () => {
const [click, setClick] = useState(true);
const navigate = useNavigate();
const currentDate = new Date();
const day = currentDate.getDate();
const month = monthOfTheYear[currentDate.getMonth()];
const year = currentDate.getFullYear();
const formattedDate = `${month} ${day}, ${year}`;

const handleClick = () => {
setClick(!click);
navigate("/");
};

return (
<div className={CarousalCSS.card}>
<div className={CarousalCSS.CardContent}>
<CardHeader
avatar={<Avatar src={avatarImage} />}
title="__bokaboka__"
subheader={formattedDate}
action={
<IconButton>
<MoreVert />
</IconButton>
}
/>
<Swiper
modules={[Navigation, Pagination, Scrollbar]}
spaceBetween={0}
grabCursor
keyboard={{ enabled: true }}
navigation
pagination={{ clickable: true }}
loop
breakpoints={{}}
>
{images.map((image, index) => (
<SwiperSlide key={index}>
<CardMedia
component="img"
className={CarousalCSS.CardMedia}
image={image}
/>
</SwiperSlide>
))}
</Swiper>
</div>
<CardActions disableSpacing>
<IconButton>
<Favorite onClick={handleClick} />
</IconButton>
<IconButton>
<CommentIcon onClick={handleClick} />
</IconButton>
<IconButton>
<ShareIcon onClick={handleClick} />
</IconButton>
</CardActions>
<CardContent>
<Typography
variant="body2"
color="textSecondary"
component="p"
className="tiro-bangla-regular"
>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi at
eius in corrupti, quas ullam alias psa odit?
</Typography>
</CardContent>
</div>
);
};
15 changes: 15 additions & 0 deletions ts-frontend/src/constants/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,21 @@ export const positions = [
{ lat: 22.141517, lng: 88.389205 },
];

export const monthOfTheYear = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];

export const circleOptionForFriends = {
strokeColor: "#0c4a6e",
strokeOpacity: 0.8,
Expand Down
18 changes: 18 additions & 0 deletions ts-frontend/src/pages/Feed.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { FC } from "react";
import FeedCSS from "../styles/Feed.module.css";
import { Carousal } from "../components/Carousal";

export const Feed: FC = () => {
return (
<div className={FeedCSS.container}>
<Carousal />
<Carousal />
<Carousal />
<Carousal />
<Carousal />
<Carousal />
<Carousal />
<Carousal />
</div>
);
};
3 changes: 2 additions & 1 deletion ts-frontend/src/pages/Login.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import "react-toastify/dist/ReactToastify.css";
import { LoginContext } from "../context/LoginContext";
import HttpStatusCode from "../types/HttpStatusCode";
import Loader from "../components/Loader";
import logo from "../../public/images/sign-up.png";

import logo from "/sign-up.png";

const BASE_API_URI = import.meta.env.VITE_BACKEND_URI;

Expand Down
2 changes: 1 addition & 1 deletion ts-frontend/src/pages/Signup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, { useState, ChangeEvent, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import logo from "../../public/images/sign-up.png";
import logo from "/sign-up.png";
import HttpStatusCode from "../types/HttpStatusCode";
import Loader from "../components/Loader";

Expand Down
Loading

1 comment on commit 4f19da8

@vercel
Copy link

@vercel vercel bot commented on 4f19da8 Apr 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.