Skip to content
Snippets Groups Projects
Commit f95ffa1f authored by Chloé JACOB's avatar Chloé JACOB :alien:
Browse files

intégration de la page 'feed'

parent e0efd693
Branches
Tags
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
index.html
+ 3
− 1
View file @ f95ffa1f
......@@ -4,7 +4,9 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<title>INSTALIKE</title>
<!--FONT TITLE INSTALIKE : billabong -->
<link href="https://fonts.cdnfonts.com/css/billabong" rel="stylesheet">
</head>
<body>
<div id="root"></div>
......
package-lock.json
+ 900
− 4
View file @ f95ffa1f
This diff is collapsed.
postcss.config.cjs 0 → 100644
+ 6
− 0
View file @ f95ffa1f
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
src/App.tsx
+ 2
− 2
View file @ f95ffa1f
......@@ -62,11 +62,11 @@ function App() {
<>
<Routes>
<Route path="login" element={<LoginView />} />
<Route element={<AuthGuard />}>
{/* <Route element={<AuthGuard />}> */}
<Route path="feed" element={<FeedView />} />
<Route path="discover" element={<DiscoverView />} />
<Route path="post/:id" element={<PostView />} />
</Route>
{/* </Route> */}
<Route path="*" element={<Navigate to="feed" />} />
</Routes>
</>
......
src/index.css
+ 8
− 67
View file @ f95ffa1f
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
@tailwind base;
@tailwind components;
@tailwind utilities;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
* {
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
.instalike_title {
font-family: 'Billabong', sans-serif;
}
\ No newline at end of file
src/views/FeedView.tsx
+ 209
− 3
View file @ f95ffa1f
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHouse } from '@fortawesome/free-solid-svg-icons';
import { faCompass } from '@fortawesome/free-regular-svg-icons';
import { faSquarePlus } from '@fortawesome/free-regular-svg-icons';
import { faCircleUser } from '@fortawesome/free-regular-svg-icons';
import { faMoon } from '@fortawesome/free-regular-svg-icons';
import { faLocationDot } from '@fortawesome/free-solid-svg-icons';
import { faHeart } from '@fortawesome/free-solid-svg-icons';
import { faCommentDots } from '@fortawesome/free-solid-svg-icons';
import { faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
import { faPlus } from '@fortawesome/free-solid-svg-icons';
const FeedView = () => {
return <>Feed</>;
return <>
<div>
{/* HEADER */}
<div className="border-b-[0.8px]">
<div className="max-w-[1280px] mx-auto flex items-center justify-between px-4 py-2 h-16">
<h1 className="instalike_title text-[44px]">Instalike</h1>
<nav className="flex gap-5">
{/* HOME */}
<a href="">
{/* <img src="https://cdn-icons-png.flaticon.com/512/25/25694.png" width="28" alt="" /> */}
<FontAwesomeIcon className="text-[24px]" icon={faHouse} />
</a>
{/* DISCOVER */}
<a href="">
<FontAwesomeIcon className="text-[24px]" icon={faCompass} />
</a>
{/* ADD PICS */}
<a href="">
<FontAwesomeIcon className="text-[24px]" icon={faSquarePlus} />
</a>
{/* PROFIL */}
<a href="">
<FontAwesomeIcon className="text-[24px]" icon={faCircleUser} />
</a>
{/* LIGHT/DARK MODE */}
<a href="">
<FontAwesomeIcon className="text-[24px]" icon={faMoon} />
</a>
</nav>
</div>
</div>
{/* FEED */}
<div className="max-w-[640px] mx-auto mt-8 mb-16 px-4">
{/* STORIES */}
<ul className="flex gap-8">
{/* A STORY */}
<li>
<div className="flex flex-col items-center">
<div className="relative">
<div className="rounded-full overflow-hidden w-24 h-24">
<img src="https://cdn4.vectorstock.com/i/1000x1000/82/53/white-letter-a-logo-on-red-background-vector-26888253.jpg"
alt="" />
</div>
<button
className="px-2 py-[7px] text-2xl rounded-full bg-gray-300/50 flex items-center justify-center absolute right-0 bottom-0">
<FontAwesomeIcon className="text-[14px]" icon={faPlus} />
</button>
</div>
<p className="mt-2">Chloé</p>
</div>
</li>
{/* A STORY */}
<li>
<div className="flex flex-col items-center">
<div className="relative">
<div className="rounded-full overflow-hidden w-24 h-24">
<img src="https://cdn4.vectorstock.com/i/1000x1000/82/53/white-letter-a-logo-on-red-background-vector-26888253.jpg"
alt="" />
</div>
<button
className="px-2 py-[7px] text-2xl rounded-full bg-gray-300/50 flex items-center justify-center absolute right-0 bottom-0">
<FontAwesomeIcon className="text-[14px]" icon={faPlus} />
</button>
</div>
<p className="mt-2">Chloé</p>
</div>
</li>
{/* A STORY */}
<li>
<div className="flex flex-col items-center">
<div className="relative">
<div className="rounded-full overflow-hidden w-24 h-24">
<img src="https://cdn4.vectorstock.com/i/1000x1000/82/53/white-letter-a-logo-on-red-background-vector-26888253.jpg"
alt="" />
</div>
<button
className="px-2 py-[7px] text-2xl rounded-full bg-gray-300/50 flex items-center justify-center absolute right-0 bottom-0">
<FontAwesomeIcon className="text-[14px]" icon={faPlus} />
</button>
</div>
<p className="mt-2">Chloé</p>
</div>
</li>
</ul>
{/* POSTS */}
<div>
{/* A POST */}
<div className="border rounded-xl mt-10">
{/* HEADER POST */}
<div className="flex justify-between p-4">
<div className="flex items-center gap-4">
<div className="rounded-full overflow-hidden w-12 h-12">
<img src="https://cdn4.vectorstock.com/i/1000x1000/82/53/white-letter-a-logo-on-red-background-vector-26888253.jpg"
alt="" />
</div>
<div>
<p className="font-bold">j.metterrothan</p>
<div className="flex items-center gap-1">
<FontAwesomeIcon className="text-[14px]" icon={faLocationDot} />
<p className="text-sm mt-[2px]">Italy, 13 days ago</p>
</div>
</div>
</div>
<div className="w-10 flex justify-center items-center">
<FontAwesomeIcon className="text-[22px]" icon={faEllipsisVertical} />
</div>
</div>
{/* IMAGE POST */}
<div className="flex justify-center items-center">
<img src="https://cdn4.vectorstock.com/i/1000x1000/82/53/white-letter-a-logo-on-red-background-vector-26888253.jpg"
alt="" />
</div>
{/* BIO POST */}
<div className="p-4">
<p className="text-red-500">Quo praesentium facilis voluptatibus consequatur.</p>
<div className="flex mt-3 gap-2">
<button type="button" className="px-4 py-1 bg-slate-400 rounded-full flex items-center gap-2">
<FontAwesomeIcon className="text-[20px]" icon={faHeart} />
<span className="mt-1">0</span>
</button>
<button type="button" className="px-4 flex items-center gap-2">
<FontAwesomeIcon className="text-[20px]" icon={faCommentDots} />
<span className="mt-1">0</span>
</button>
</div>
</div>
{/* COMMENTS POST -> à cacher s'il y en a pas */}
<div className="flex items-center gap-4 p-4 border-t-[0.8px]">
<div className="rounded-full overflow-hidden w-8 h-8">
<img src="https://cdn4.vectorstock.com/i/1000x1000/82/53/white-letter-a-logo-on-red-background-vector-26888253.jpg"
alt="" />
</div>
<div>
<p><span className="font-bold mr-1">j.metterrothan</span>test</p>
<p className="text-sm">7 days ago</p>
</div>
</div>
</div>
{/* A POST */}
<div className="border rounded-xl mt-10">
{/* HEADER POST */}
<div className="flex justify-between p-4">
<div className="flex items-center gap-4">
<div className="rounded-full overflow-hidden w-12 h-12">
<img src="https://cdn4.vectorstock.com/i/1000x1000/82/53/white-letter-a-logo-on-red-background-vector-26888253.jpg"
alt="" />
</div>
<div>
<p className="font-bold">j.metterrothan</p>
<div className="flex items-center gap-1">
<FontAwesomeIcon className="text-[14px]" icon={faLocationDot} />
<p className="text-sm mt-[2px]">Italy, 13 days ago</p>
</div>
</div>
</div>
<div className="w-10 flex justify-center items-center">
<FontAwesomeIcon className="text-[22px]" icon={faEllipsisVertical} />
</div>
</div>
{/* IMAGE POST */}
<div className="flex justify-center items-center">
<img src="https://cdn4.vectorstock.com/i/1000x1000/82/53/white-letter-a-logo-on-red-background-vector-26888253.jpg"
alt="" />
</div>
{/* BIO POST */}
<div className="p-4">
<p className="text-red-500">Quo praesentium facilis voluptatibus consequatur.</p>
<div className="flex mt-3 gap-2">
<button type="button" className="px-4 py-1 bg-slate-400 rounded-full flex items-center gap-2">
<FontAwesomeIcon className="text-[20px]" icon={faHeart} />
<span className="mt-1">0</span>
</button>
<button type="button" className="px-4 flex items-center gap-2">
<FontAwesomeIcon className="text-[20px]" icon={faCommentDots} />
<span className="mt-1">0</span>
</button>
</div>
</div>
{/* COMMENTS POST -> à cacher s'il y en a pas */}
<div className="flex items-center gap-4 p-4 border-t-[0.8px]">
<div className="rounded-full overflow-hidden w-8 h-8">
<img src="https://cdn4.vectorstock.com/i/1000x1000/82/53/white-letter-a-logo-on-red-background-vector-26888253.jpg"
alt="" />
</div>
<div>
<p><span className="font-bold mr-1">j.metterrothan</span>test</p>
<p className="text-sm">7 days ago</p>
</div>
</div>
</div>
</div>
</div>
</div>
</>;
};
export default FeedView;
\ No newline at end of file
export default FeedView;
\ No newline at end of file
tailwind.config.cjs 0 → 100644
+ 12
− 0
View file @ f95ffa1f
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}",],
theme: {
extend: {
colords: {
'light-gray': '#718096',
}
},
},
plugins: [],
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment