Skip to content

Commit

Permalink
Merge pull request #60 from Bug-Bust3rs/dev
Browse files Browse the repository at this point in the history 
feat : feed update
  • Loading branch information
@Puskar-Roy
Puskar-Roy authored Jul 23, 2024
2 parents 92bed75 + c7ccec9 commit 8667a98
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 10 deletions.
123 changes: 121 additions & 2 deletions apps/frontend/src/components/feed/AsideLeft.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,126 @@
import { useAuthContext } from "../../hooks/useAuthContext";
const AsideLeft = () => {
const {state} = useAuthContext()
return (
<div className="pt-20">

<div className="pt-8 lg:pt-20 block lg:fixed left-[15%] top-0 start-0">
<div className="my-10">
<div className="bg-white rounded overflow-hidden shadow-lg">
<div className="text-center p-6 border-b">
<img
className="h-24 w-24 rounded-full mx-auto"
src="https://randomuser.me/api/portraits/men/24.jpg"
alt="Randy Robertson"
/>
<p className="pt-2 text-lg font-semibold">{state.user?.name}</p>
<p className="text-sm text-gray-600">{state.user?.email}</p>
<div className="mt-5">
<a
href="#"
className="border rounded-full py-2 px-4 text-xs font-semibold text-gray-700"
>
Manage your Account
</a>
</div>
</div>
<div className="border-b hidden lg:block">
<a href="#" className="px-4 py-2 hover:bg-gray-100 flex">
<div className="text-gray-800">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1"
viewBox="0 0 24 24"
className="w-5 h-5"
>
<path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
<div className="pl-3">
<p className="text-sm font-medium text-gray-800 leading-none">Add members</p>
<p className="text-xs text-gray-500">Add/manage users &amp; teams</p>
</div>
</a>
<a href="#" className="px-4 py-2 hover:bg-gray-100 flex">
<div className="text-gray-800">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1"
viewBox="0 0 24 24"
className="w-5 h-5"
>
<path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div className="pl-3">
<p className="text-sm font-medium text-gray-800 leading-none">Account settings</p>
<p className="text-xs text-gray-500">Usage, billing, branding, teams</p>
</div>
</a>
<a href="#" className="px-4 py-2 hover:bg-gray-100 flex">
<div className="text-gray-800">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1"
viewBox="0 0 24 24"
className="w-5 h-5"
>
<path d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div className="pl-3">
<p className="text-sm font-medium text-gray-800 leading-none">Personal settings</p>
<p className="text-xs text-gray-500">Email, profile, notifications</p>
</div>
</a>
<a href="#" className="px-4 py-2 hover:bg-gray-100 flex">
<div className="text-green-600">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1"
viewBox="0 0 24 24"
className="w-5 h-5"
>
<path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
</svg>
</div>
<div className="pl-3">
<p className="text-sm font-medium text-gray-800 leading-none">
Apps &amp; integrations
</p>
<p className="text-xs text-gray-500">Google, slack, mail</p>
</div>
</a>
</div>

<div className="hidden lg:block">
<a href="#" className="px-4 py-2 pb-4 hover:bg-gray-100 flex">
<p className="text-sm font-medium text-gray-800 leading-none">Product updates</p>
</a>
<a href="#" className="px-4 py-2 pb-4 hover:bg-gray-100 flex">
<p className="text-sm font-medium text-gray-800 leading-none">Status updates</p>
</a>
<a href="#" className="px-4 py-2 pb-4 hover:bg-gray-100 flex">
<p className="text-sm font-medium text-gray-800 leading-none">Support FAQ</p>
</a>
<a href="#" className="px-4 py-2 pb-4 hover:bg-gray-100 flex">
<p className="text-sm font-medium text-gray-800 leading-none">Logout</p>
</a>
</div>
</div>
</div>

</div>
)
}
Expand Down
11 changes: 6 additions & 5 deletions apps/frontend/src/components/feed/Feed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@ import MainFeed from "./MainFeed"

const Feed = () => {
return (
<div className="flex flex-col sm:flex-row w-auto lg:w-[80%] mx-auto pt-10 lg:pt-[100px] h-screen ">

<div className="flex flex-col sm:flex-row w-auto lg:w-[80%] mx-auto pt-10 lg:pt-[100px] min-h-screen ">
<AsideLeft />
<main className="w-[80%] flex flex-col gap-10 lg:w-[60%] mx-auto overflow-x-auto ">
<main className="w-[90%] flex flex-col gap-10 lg:w-[50%] mx-auto ">
<MainFeed />
<MainFeed />

Expand All @@ -18,9 +19,9 @@ const Feed = () => {


</main>
<AsideLeft />

</div>

</div>

)
}

Expand Down
6 changes: 3 additions & 3 deletions apps/frontend/src/components/feed/MainFeed.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import logo from '../../assets/forgot-password-animate.svg'
import logo from '../../assets/support.gif'

const MainFeed = () => {
return (
<div className=''>

<div className="bg-white lg:p-8 shadow-md rounded-lg">
<div className="bg-white p-5 lg:p-8 shadow-md rounded-lg">

<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-2">
Expand Down Expand Up @@ -33,7 +33,7 @@ const MainFeed = () => {
</div>

<div className="mb-4">
<img src={logo} alt="Post Image" className="w-full h-48 object-cover rounded-md" />
<img src={'https://imgs.search.brave.com/ghK3CGoQlTkudwqZ9DgqiL3aaY-K5r6LVk2Q-gy6RCY/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9pbWcu/dHJhdmVsdHJpYW5n/bGUuY29tL2Jsb2cv/d3AtY29udGVudC91/cGxvYWRzLzIwMTQv/MTEvS2VyYWxhLTIx/LmpwZw'} alt="Post Image" className="w-full h-auto object-cover rounded-md" />
</div>

<div className="flex items-center justify-between text-gray-500">
Expand Down

0 comments on commit 8667a98

Please sign in to comment.