first commit
This commit is contained in:
kandrusyak
113
src/partials/community/FeedLeftContent.jsx
Normal file
113
src/partials/community/FeedLeftContent.jsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import React from 'react';
|
||||
|
||||
function FeedLeftContent() {
|
||||
return (
|
||||
<div className="w-full md:w-60 mb-8 md:mb-0">
|
||||
<div className="md:sticky md:top-16 md:h-[calc(100vh-64px)] md:overflow-x-hidden md:overflow-y-auto no-scrollbar">
|
||||
<div className="md:py-8">
|
||||
|
||||
{/* Title */}
|
||||
<header className="mb-6">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Feed ✨</h1>
|
||||
</header>
|
||||
|
||||
{/* Search form */}
|
||||
<div className="xl:hidden mb-6">
|
||||
<form className="relative">
|
||||
<label htmlFor="feed-search-mobile" className="sr-only">
|
||||
Search
|
||||
</label>
|
||||
<input id="feed-search-mobile" className="form-input w-full pl-9 focus:border-slate-300" type="search" placeholder="Search…" />
|
||||
<button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
|
||||
<svg
|
||||
className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
|
||||
<path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
<div className="flex flex-nowrap overflow-x-scroll no-scrollbar md:block md:overflow-auto px-4 md:space-y-3 -mx-4">
|
||||
{/* Group 1 */}
|
||||
<div>
|
||||
<div className="text-xs font-semibold text-slate-400 uppercase mb-3 md:sr-only">Menu</div>
|
||||
<ul className="flex flex-nowrap md:block mr-3 md:mr-0">
|
||||
<li className="mr-0.5 md:mr-0 md:mb-0.5">
|
||||
<a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap bg-white" href="#0">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-indigo-500 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M10 16h4c.6 0 1-.4 1-.998V6.016c0-.3-.1-.6-.4-.8L8.6.226c-.4-.3-.9-.3-1.3 0l-6 4.992c-.2.2-.3.5-.3.799v8.986C1 15.6 1.4 16 2 16h4c.6 0 1-.4 1-.998v-2.996h2v2.996c0 .599.4.998 1 .998Zm-4-5.99c-.6 0-1 .399-1 .998v2.995H3V6.515L8 2.32l5 4.194v7.488h-2v-2.995c0-.6-.4-.999-1-.999H6Z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-indigo-500">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="mr-0.5 md:mr-0 md:mb-0.5">
|
||||
<a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M14.14 9.585h-.002a2.5 2.5 0 0 1-2 4.547 6.91 6.91 0 0 1-6.9 1.165 4.436 4.436 0 0 0 1.343-1.682c.365.087.738.132 1.113.135a4.906 4.906 0 0 0 2.924-.971 2.5 2.5 0 0 1 3.522-3.194Zm-4.015-7.397a7.023 7.023 0 0 1 4.47 5.396 4.5 4.5 0 0 0-1.7-.334c-.15.002-.299.012-.447.03a5.027 5.027 0 0 0-2.723-3.078 2.5 2.5 0 1 1 .4-2.014ZM4.663 10.5a2.5 2.5 0 1 1-3.859-.584 6.888 6.888 0 0 1-.11-1.166c0-2.095.94-4.08 2.56-5.407.093.727.364 1.419.788 2.016A4.97 4.97 0 0 0 2.694 8.75c.003.173.015.345.037.516A2.49 2.49 0 0 1 4.663 10.5Z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-slate-600">Explore</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="mr-0.5 md:mr-0 md:mb-0.5">
|
||||
<a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M5 9h11v2H5V9zM0 9h3v2H0V9zm5 4h6v2H5v-2zm-5 0h3v2H0v-2zm5-8h7v2H5V5zM0 5h3v2H0V5zm5-4h11v2H5V1zM0 1h3v2H0V1z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-slate-600">Notifications</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="mr-0.5 md:mr-0 md:mb-0.5">
|
||||
<a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M10.59 7.658 8 5.5 5.41 7.658A.25.25 0 0 1 5 7.466V0h6v7.466a.25.25 0 0 1-.41.192Z" />
|
||||
<path d="M14 16H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h2v2H2v12h12V2h-2V0h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2Z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-slate-600">Bookmarks</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="mr-0.5 md:mr-0 md:mb-0.5">
|
||||
<a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M12.311 9.527c-1.161-.393-1.85-.825-2.143-1.175A3.991 3.991 0 0012 5V4c0-2.206-1.794-4-4-4S4 1.794 4 4v1c0 1.406.732 2.639 1.832 3.352-.292.35-.981.782-2.142 1.175A3.942 3.942 0 001 13.26V16h14v-2.74c0-1.69-1.081-3.19-2.689-3.733zM6 4c0-1.103.897-2 2-2s2 .897 2 2v1c0 1.103-.897 2-2 2s-2-.897-2-2V4zm7 10H3v-.74c0-.831.534-1.569 1.33-1.838 1.845-.624 3-1.436 3.452-2.422h.436c.452.986 1.607 1.798 3.453 2.422A1.943 1.943 0 0113 13.26V14z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-slate-600">Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* Group 2 */}
|
||||
<div>
|
||||
<div className="text-xs font-semibold text-slate-400 uppercase mb-3">My Groups</div>
|
||||
<ul className="flex flex-nowrap md:block mr-3 md:mr-0">
|
||||
<li className="mr-0.5 md:mr-0 md:mb-0.5">
|
||||
<a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M7.3 8.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM7.3 14.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM.3 9.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0Z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-slate-600">Productivity</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="mr-0.5 md:mr-0 md:mb-0.5">
|
||||
<a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M7.3 8.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM7.3 14.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM.3 9.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0Z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-slate-600">Self Development</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FeedLeftContent;
|
||||
384
src/partials/community/FeedPosts.jsx
Normal file
384
src/partials/community/FeedPosts.jsx
Normal file
@@ -0,0 +1,384 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import EditMenu from '../../components/DropdownEditMenu';
|
||||
|
||||
import UserImage02 from '../../images/user-40-02.jpg';
|
||||
import UserImage03 from '../../images/user-40-03.jpg';
|
||||
import UserImage04 from '../../images/user-40-04.jpg';
|
||||
import UserImage06 from '../../images/user-40-06.jpg';
|
||||
import UserImage08 from '../../images/user-40-08.jpg';
|
||||
import CommenterImage04 from '../../images/user-32-04.jpg';
|
||||
import CommenterImage05 from '../../images/user-32-05.jpg';
|
||||
import FeedImage01 from '../../images/feed-image-01.jpg';
|
||||
import FeedImage02 from '../../images/feed-image-02.jpg';
|
||||
|
||||
function FeedPosts() {
|
||||
return (
|
||||
<>
|
||||
{/* Post 1 */}
|
||||
<div className="bg-white shadow-md rounded border border-slate-200 p-5">
|
||||
{/* Header */}
|
||||
<header className="flex justify-between items-start space-x-3 mb-3">
|
||||
{/* User */}
|
||||
<div className="flex items-start space-x-3">
|
||||
<img className="rounded-full shrink-0" src={UserImage03} width="40" height="40" alt="User 03" />
|
||||
<div>
|
||||
<div className="leading-tight">
|
||||
<a className="text-sm font-semibold text-slate-800" href="#0">
|
||||
Dominik Lamakani
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">Yesterday at 10:48 AM</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Menu button */}
|
||||
<EditMenu align="right" className="relative inline-flex shrink-0">
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
|
||||
Option 1
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
|
||||
Option 2
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">
|
||||
Remove
|
||||
</Link>
|
||||
</li>
|
||||
</EditMenu>
|
||||
</header>
|
||||
{/* Body */}
|
||||
<div className="text-sm text-slate-800 space-y-2 mb-5">
|
||||
<p>👋</p>
|
||||
<p>
|
||||
It's more likely that people reading your blog will opt in with their email addresses if you give them something highly relevant in
|
||||
return. Ditch that too-general lead magnet and create "content upgrades" for your highest-traffic articles.
|
||||
</p>
|
||||
<p>Thread 👇</p>
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<footer className="flex items-center space-x-4">
|
||||
{/* Like button */}
|
||||
<button className="flex items-center text-slate-400 hover:text-indigo-500">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
|
||||
<path d="M14.682 2.318A4.485 4.485 0 0011.5 1 4.377 4.377 0 008 2.707 4.383 4.383 0 004.5 1a4.5 4.5 0 00-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 014.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 011.785 4.251h-.003z" />
|
||||
</svg>
|
||||
<div className="text-sm text-slate-500">4</div>
|
||||
</button>
|
||||
{/* Share button */}
|
||||
<button className="flex items-center text-slate-400 hover:text-indigo-500">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
|
||||
<path d="M13 7h2v6a1 1 0 0 1-1 1H4v2l-4-3 4-3v2h9V7ZM3 9H1V3a1 1 0 0 1 1-1h10V0l4 3-4 3V4H3v5Z" />
|
||||
</svg>
|
||||
<div className="text-sm text-slate-500">44</div>
|
||||
</button>
|
||||
{/* Replies button */}
|
||||
<button className="flex items-center text-slate-400 hover:text-indigo-500">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
|
||||
</svg>
|
||||
<div className="text-sm text-slate-500">7</div>
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
{/* Post 2 */}
|
||||
<div className="bg-white shadow-md rounded border border-slate-200 p-5">
|
||||
{/* Header */}
|
||||
<header className="flex justify-between items-start space-x-3 mb-3">
|
||||
{/* User */}
|
||||
<div className="flex items-start space-x-3">
|
||||
<img className="rounded-full shrink-0" src={UserImage06} width="40" height="40" alt="User 06" />
|
||||
<div>
|
||||
<div className="leading-tight">
|
||||
<a className="text-sm font-semibold text-slate-800" href="#0">
|
||||
Mark Karimani
|
||||
</a>
|
||||
</div>
|
||||
<div className="inline-flex items-center">
|
||||
<svg className="w-3 h-3 shrink-0 fill-yellow-500 mr-1" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.953 4.29a.5.5 0 0 0-.454-.29H6.14L6.984.62A.5.5 0 0 0 6.12.174l-6 7A.5.5 0 0 0 .499 8h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z" />
|
||||
</svg>
|
||||
<div className="text-xs text-slate-500">Sponsored</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Menu button */}
|
||||
<EditMenu align="right" className="relative inline-flex shrink-0">
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
|
||||
Option 1
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
|
||||
Option 2
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">
|
||||
Remove
|
||||
</Link>
|
||||
</li>
|
||||
</EditMenu>
|
||||
</header>
|
||||
{/* Body */}
|
||||
<div className="text-sm text-slate-800 space-y-2 mb-5">
|
||||
<p>Designing an Earth-positive future, together 🌿</p>
|
||||
<div className="relative !my-4">
|
||||
<img className="block w-full" src={FeedImage01} width="590" height="332" alt="Feed 01" />
|
||||
<div className="absolute left-0 right-0 bottom-0 p-4 bg-black bg-opacity-25 backdrop-blur-md">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-xs font-medium text-slate-300">togethernature.com</div>
|
||||
<a className="text-xs font-medium text-indigo-400 hover:text-indigo-300" href="#0">
|
||||
Learn More ->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<footer className="flex items-center space-x-4">
|
||||
{/* Like button */}
|
||||
<button className="flex items-center text-slate-400 hover:text-indigo-500">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
|
||||
<path d="M14.682 2.318A4.485 4.485 0 0011.5 1 4.377 4.377 0 008 2.707 4.383 4.383 0 004.5 1a4.5 4.5 0 00-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 014.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 011.785 4.251h-.003z" />
|
||||
</svg>
|
||||
<div className="text-sm text-slate-500">4</div>
|
||||
</button>
|
||||
{/* Share button */}
|
||||
<button className="flex items-center text-slate-400 hover:text-indigo-500">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
|
||||
<path d="M13 7h2v6a1 1 0 0 1-1 1H4v2l-4-3 4-3v2h9V7ZM3 9H1V3a1 1 0 0 1 1-1h10V0l4 3-4 3V4H3v5Z" />
|
||||
</svg>
|
||||
<div className="text-sm text-slate-500">44</div>
|
||||
</button>
|
||||
{/* Replies button */}
|
||||
<button className="flex items-center text-slate-400 hover:text-indigo-500">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
|
||||
</svg>
|
||||
<div className="text-sm text-slate-500">7</div>
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
{/* Post 3 */}
|
||||
<div className="bg-white shadow-md rounded border border-slate-200 p-5">
|
||||
{/* Header */}
|
||||
<header className="flex justify-between items-start space-x-3 mb-3">
|
||||
{/* User */}
|
||||
<div className="flex items-start space-x-3">
|
||||
<img className="rounded-full shrink-0" src={UserImage04} width="40" height="40" alt="User 04" />
|
||||
<div>
|
||||
<div className="leading-tight">
|
||||
<a className="text-sm font-semibold text-slate-800" href="#0">
|
||||
Erica Spriggs
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">Yesterday at 2:34 PM</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Menu button */}
|
||||
<EditMenu align="right" className="relative inline-flex shrink-0">
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
|
||||
Option 1
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
|
||||
Option 2
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">
|
||||
Remove
|
||||
</Link>
|
||||
</li>
|
||||
</EditMenu>
|
||||
</header>
|
||||
{/* Body */}
|
||||
<div className="text-sm text-slate-800 space-y-2 mb-5">
|
||||
<p>Any book recommendations for a first-time entrepreneur? 📚</p>
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<footer className="flex items-center space-x-4">
|
||||
{/* Like button */}
|
||||
<button className="flex items-center text-slate-400 hover:text-indigo-500">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
|
||||
<path d="M14.682 2.318A4.485 4.485 0 0011.5 1 4.377 4.377 0 008 2.707 4.383 4.383 0 004.5 1a4.5 4.5 0 00-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 014.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 011.785 4.251h-.003z" />
|
||||
</svg>
|
||||
<div className="text-sm text-slate-500">122</div>
|
||||
</button>
|
||||
{/* Share button */}
|
||||
<button className="flex items-center text-slate-400 hover:text-indigo-500">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
|
||||
<path d="M13 7h2v6a1 1 0 0 1-1 1H4v2l-4-3 4-3v2h9V7ZM3 9H1V3a1 1 0 0 1 1-1h10V0l4 3-4 3V4H3v5Z" />
|
||||
</svg>
|
||||
<div className="text-sm text-slate-500">7</div>
|
||||
</button>
|
||||
{/* Replies button */}
|
||||
<button className="flex items-center text-slate-400 hover:text-indigo-500">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
|
||||
</svg>
|
||||
<div className="text-sm text-slate-500">298</div>
|
||||
</button>
|
||||
</footer>
|
||||
{/* Comments */}
|
||||
<div className="mt-5 pt-3 border-t border-slate-200">
|
||||
<ul className="space-y-2 mb-3">
|
||||
{/* Comment */}
|
||||
<li className="p-3 bg-slate-50 rounded">
|
||||
<div className="flex items-start space-x-3">
|
||||
<img className="rounded-full shrink-0" src={CommenterImage04} width="32" height="32" alt="User 04" />
|
||||
<div>
|
||||
<div className="text-xs text-slate-500">
|
||||
<a className="font-semibold text-slate-800" href="#0">
|
||||
Sophie Wenner
|
||||
</a>{' '}
|
||||
· 44min
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
@EricaSpriggs
|
||||
</a>{' '}
|
||||
Reading through and really enjoying "Zero to Sold" by Arvid.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Comment */}
|
||||
<li className="p-3 bg-slate-50 rounded">
|
||||
<div className="flex items-start space-x-3">
|
||||
<img className="rounded-full shrink-0" src={CommenterImage05} width="32" height="32" alt="User 05" />
|
||||
<div>
|
||||
<div className="text-xs text-slate-500">
|
||||
<a className="font-semibold text-slate-800" href="#0">
|
||||
Kyla Scanlon
|
||||
</a>{' '}
|
||||
· 1h
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
Depends on the company you're running, but if I had to choose just one book, it'd be The Personal MBA by Josh Kaufman.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
{/* Comments footer */}
|
||||
<div className="flex justify-between space-x-2">
|
||||
<div className="text-sm text-slate-500">
|
||||
<span className="font-medium text-slate-600">2</span> of <span className="font-medium text-slate-600">67</span> comments
|
||||
</div>
|
||||
<button className="text-sm font-medium text-indigo-500 hover:text-indigo-600">View More Comments</button>
|
||||
</div>
|
||||
{/* Comment form */}
|
||||
<div className="flex items-center space-x-3 mt-3">
|
||||
<img className="rounded-full shrink-0" src={UserImage02} width="32" height="32" alt="User 02" />
|
||||
<div className="grow">
|
||||
<label htmlFor="comment-form" className="sr-only">
|
||||
Write a comment…
|
||||
</label>
|
||||
<input
|
||||
id="comment-form"
|
||||
className="form-input w-full bg-slate-100 border-transparent focus:bg-white focus:border-slate-300 placeholder-slate-500"
|
||||
type="text"
|
||||
placeholder="Write a comment…"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Post 4 */}
|
||||
<div className="bg-white shadow-md rounded border border-slate-200 p-5">
|
||||
{/* Header */}
|
||||
<header className="flex justify-between items-start space-x-3 mb-3">
|
||||
{/* User */}
|
||||
<div className="flex items-start space-x-3">
|
||||
<img className="rounded-full shrink-0" src={UserImage08} width="40" height="40" alt="User 08" />
|
||||
<div>
|
||||
<div className="leading-tight">
|
||||
<a className="text-sm font-semibold text-slate-800" href="#0">
|
||||
Margaret Sullivan
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">Yesterday at 4:56 PM</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Menu button */}
|
||||
<EditMenu align="right" className="relative inline-flex shrink-0">
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
|
||||
Option 1
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
|
||||
Option 2
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">
|
||||
Remove
|
||||
</Link>
|
||||
</li>
|
||||
</EditMenu>
|
||||
</header>
|
||||
{/* Body */}
|
||||
<div className="text-sm text-slate-800 space-y-2 mb-5">
|
||||
<p>Kyla Network - Make new connections, join communities, and access exclusive experiences. 🧑🤝🧑</p>
|
||||
<div className="relative flex items-center justify-center !my-4">
|
||||
<img className="block w-full" src={FeedImage02} width="590" height="332" alt="Feed 01" />
|
||||
<button className="absolute group">
|
||||
<svg className="w-16 h-16" width="64" height="64" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle className="fill-white opacity-80 group-hover:opacity-100 transition" cx="32" cy="32" r="32" />
|
||||
<path
|
||||
className="fill-indigo-500"
|
||||
d="M40 33a.999.999 0 0 0-.427-.82l-10-7A1 1 0 0 0 28 26v14.002a.999.999 0 0 0 1.573.819l10-7A.995.995 0 0 0 40 33V33c0 .002 0 .002 0 0Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div className="absolute left-4 bottom-4 right-4">
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="text-xs font-medium text-slate-300 px-2 py-1 bg-black bg-opacity-25">0:48</div>
|
||||
<div className="text-xs font-medium text-slate-300 px-2 py-1 bg-black bg-opacity-25">1M Views</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<footer className="flex items-center space-x-4">
|
||||
{/* Like button */}
|
||||
<button className="flex items-center text-indigo-400">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
|
||||
<path d="M14.682 2.318A4.485 4.485 0 0011.5 1 4.377 4.377 0 008 2.707 4.383 4.383 0 004.5 1a4.5 4.5 0 00-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 014.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 011.785 4.251h-.003z" />
|
||||
</svg>
|
||||
<div className="text-sm text-indigo-500">2.2K</div>
|
||||
</button>
|
||||
{/* Share button */}
|
||||
<button className="flex items-center text-slate-400 hover:text-indigo-500">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
|
||||
<path d="M13 7h2v6a1 1 0 0 1-1 1H4v2l-4-3 4-3v2h9V7ZM3 9H1V3a1 1 0 0 1 1-1h10V0l4 3-4 3V4H3v5Z" />
|
||||
</svg>
|
||||
<div className="text-sm text-slate-500">4.3K</div>
|
||||
</button>
|
||||
{/* Replies button */}
|
||||
<button className="flex items-center text-slate-400 hover:text-indigo-500">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current mr-1.5" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
|
||||
</svg>
|
||||
<div className="text-sm text-slate-500">92</div>
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default FeedPosts;
|
||||
240
src/partials/community/FeedRightContent.jsx
Normal file
240
src/partials/community/FeedRightContent.jsx
Normal file
@@ -0,0 +1,240 @@
|
||||
import React from 'react';
|
||||
|
||||
import GroupAvatar01 from '../../images/group-avatar-01.png';
|
||||
import GroupAvatar02 from '../../images/group-avatar-02.png';
|
||||
import GroupAvatar03 from '../../images/group-avatar-03.png';
|
||||
import GroupAvatar04 from '../../images/group-avatar-04.png';
|
||||
import UserImage01 from '../../images/user-32-01.jpg';
|
||||
import UserImage02 from '../../images/user-32-02.jpg';
|
||||
import UserImage04 from '../../images/user-32-04.jpg';
|
||||
import UserImage05 from '../../images/user-32-05.jpg';
|
||||
|
||||
function FeedRightContent() {
|
||||
return (
|
||||
<div className="w-full hidden xl:block xl:w-72">
|
||||
<div className="lg:sticky lg:top-16 lg:h-[calc(100vh-64px)] lg:overflow-x-hidden lg:overflow-y-auto no-scrollbar">
|
||||
<div className="md:py-8">
|
||||
|
||||
{/* Search form */}
|
||||
<div className="mb-6">
|
||||
<form className="relative">
|
||||
<label htmlFor="feed-search-desktop" className="sr-only">
|
||||
Search
|
||||
</label>
|
||||
<input id="feed-search-desktop" className="form-input w-full pl-9 focus:border-slate-300" type="search" placeholder="Search…" />
|
||||
<button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
|
||||
<svg
|
||||
className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
|
||||
<path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Blocks */}
|
||||
<div className="space-y-4">
|
||||
|
||||
{/* Block 1 */}
|
||||
<div className="bg-slate-50 p-4 rounded border border-slate-200">
|
||||
<div className="text-xs font-semibold text-slate-400 uppercase mb-4">Top Communities</div>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="grow flex items-center">
|
||||
<div className="relative mr-3">
|
||||
<img className="w-8 h-8 rounded-full" src={GroupAvatar01} width="32" height="32" alt="Group 01" />
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">Introductions</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
|
||||
Join
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="grow flex items-center">
|
||||
<div className="relative mr-3">
|
||||
<img className="w-8 h-8 rounded-full" src={GroupAvatar02} width="32" height="32" alt="Group 02" />
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">HackerNews</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
|
||||
Join
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="grow flex items-center">
|
||||
<div className="relative mr-3">
|
||||
<img className="w-8 h-8 rounded-full" src={GroupAvatar03} width="32" height="32" alt="Group 03" />
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">ReactJs</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">
|
||||
<svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
|
||||
<path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="grow flex items-center">
|
||||
<div className="relative mr-3">
|
||||
<img className="w-8 h-8 rounded-full" src={GroupAvatar04} width="32" height="32" alt="Group 04" />
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">JustChatting</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
|
||||
Join
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-4">
|
||||
<button className="btn-sm w-full bg-white border-slate-200 hover:border-slate-300 text-indigo-500 shadow-none">View All</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Block 2 */}
|
||||
<div className="bg-slate-50 p-4 rounded border border-slate-200">
|
||||
<div className="text-xs font-semibold text-slate-400 uppercase mb-4">Who to follow</div>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="grow flex items-center">
|
||||
<div className="relative mr-3">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage02} width="32" height="32" alt="User 02" />
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">Elly Boutin</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
|
||||
Follow
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="grow flex items-center">
|
||||
<div className="relative mr-3">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage04} width="32" height="32" alt="User 04" />
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">Rich Harris</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
|
||||
Follow
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="grow flex items-center">
|
||||
<div className="relative mr-3">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage05} width="32" height="32" alt="User 05" />
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">Mary Porzio</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
|
||||
Follow
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="grow flex items-center">
|
||||
<div className="relative mr-3">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage01} width="32" height="32" alt="User 01" />
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">Brian Lovin</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">
|
||||
Follow
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-4">
|
||||
<button className="btn-sm w-full bg-white border-slate-200 hover:border-slate-300 text-indigo-500 shadow-none">View All</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Block 3 */}
|
||||
<div className="bg-slate-50 p-4 rounded border border-slate-200">
|
||||
<div className="text-xs font-semibold text-slate-400 uppercase mb-4">Trends for you</div>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<div className="text-sm mb-1">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
Tracking your website traffic on launch day 📈
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">248 comments</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="text-sm mb-1">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
Freemium model questions
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">47 comments</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="text-sm mb-1">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
Slack and Community
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">24 comments</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="text-sm mb-1">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
Who owns user onboarding in your company?
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">17 comments</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="text-sm mb-1">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
Questions from a very confused Web3 startup founder 🤔
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">9 comments</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-4">
|
||||
<button className="btn-sm w-full bg-white border-slate-200 hover:border-slate-300 text-indigo-500 shadow-none">View All</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FeedRightContent;
|
||||
427
src/partials/community/ForumEntries.jsx
Normal file
427
src/partials/community/ForumEntries.jsx
Normal file
@@ -0,0 +1,427 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import UserAvatar from '../../images/user-avatar-32.png';
|
||||
import UserImage01 from '../../images/user-32-01.jpg';
|
||||
import UserImage02 from '../../images/user-32-02.jpg';
|
||||
import UserImage03 from '../../images/user-32-03.jpg';
|
||||
import UserImage04 from '../../images/user-32-04.jpg';
|
||||
import UserImage05 from '../../images/user-32-05.jpg';
|
||||
import UserImage06 from '../../images/user-32-06.jpg';
|
||||
import UserImage07 from '../../images/user-32-07.jpg';
|
||||
|
||||
function ForumEntries() {
|
||||
return (
|
||||
<>
|
||||
{/* Post 1 */}
|
||||
<article className="bg-white shadow-md rounded border border-slate-200 p-5">
|
||||
<div className="flex flex-start space-x-4">
|
||||
{/* Avatar */}
|
||||
<div className="shrink-0 mt-1.5">
|
||||
<img className="w-8 h-8 rounded-full" src={UserAvatar} width="32" height="32" alt="User avatar" />
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className="grow">
|
||||
{/* Title */}
|
||||
<h2 className="font-semibold text-slate-800 mb-2">
|
||||
<Link to="/community/forum-post">Share Your Startup - December 2021 - Upvote This For Maximum Visibility!</Link>
|
||||
</h2>
|
||||
{/* Footer */}
|
||||
<footer className="flex flex-wrap text-sm">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 mr-2 fill-current" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.686 5.708 10.291.313c-.4-.4-.999-.4-1.399 0s-.4 1 0 1.399l.6.6-6.794 3.696-1-1C1.299 4.61.7 4.61.3 5.009c-.4.4-.4 1 0 1.4l1.498 1.498 2.398 2.398L.6 14.001 2 15.4l3.696-3.697L9.692 15.7c.5.5 1.199.2 1.398 0 .4-.4.4-1 0-1.4l-.999-.998 3.697-6.695.6.6c.599.6 1.199.2 1.398 0 .3-.4.3-1.1-.1-1.499Zm-7.193 6.095L4.196 7.507l6.695-3.697 1.298 1.299-3.696 6.694Z" />
|
||||
</svg>
|
||||
ekuplu89
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">7d</span>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">688 Comments</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{/* Upvote button */}
|
||||
<div className="shrink-0">
|
||||
<button className="text-xs font-semibold text-center h-12 w-12 border border-indigo-400 rounded-sm flex flex-col justify-center items-center outline outline-2 outline-indigo-100">
|
||||
<svg className="inline-flex fill-indigo-500 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>499</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Post 2 */}
|
||||
<article className="bg-white shadow-md rounded border border-slate-200 p-5">
|
||||
<div className="flex flex-start space-x-4">
|
||||
{/* Avatar */}
|
||||
<div className="shrink-0 mt-1.5">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage02} width="32" height="32" alt="User 02" />
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className="grow">
|
||||
{/* Title */}
|
||||
<h2 className="font-semibold text-slate-800 mb-2">
|
||||
<Link to="/community/forum-post">Failed for the past 12 years as a tech entrepreneur. My key takeaways.</Link>
|
||||
</h2>
|
||||
{/* Footer */}
|
||||
<footer className="flex flex-wrap text-sm">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
ekuplu89
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">4h</span>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">14 Comments</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{/* Upvote button */}
|
||||
<div className="shrink-0">
|
||||
<button className="text-xs font-semibold text-center h-12 w-12 border border-indigo-400 rounded-sm flex flex-col justify-center items-center outline outline-2 outline-indigo-100">
|
||||
<svg className="inline-flex fill-indigo-500 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>217</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Post 3 */}
|
||||
<article className="bg-white shadow-md rounded border border-slate-200 p-5">
|
||||
<div className="flex flex-start space-x-4">
|
||||
{/* Avatar */}
|
||||
<div className="shrink-0 mt-1.5">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage01} width="32" height="32" alt="User 01" />
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className="grow">
|
||||
{/* Title */}
|
||||
<h2 className="font-semibold text-slate-800 mb-2">
|
||||
<Link to="/community/forum-post">Besides Product Hunt, where else should I promote my new project? 🤔</Link>
|
||||
</h2>
|
||||
{/* Footer */}
|
||||
<footer className="flex flex-wrap text-sm">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
katemerlu
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">2h</span>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">17 Comments</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{/* Upvote button */}
|
||||
<div className="shrink-0">
|
||||
<button className="text-xs font-semibold text-center h-12 w-12 border border-slate-200 hover:border-slate-300 rounded-sm flex flex-col justify-center items-center">
|
||||
<svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>44</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Post 4 */}
|
||||
<article className="bg-white shadow-md rounded border border-slate-200 p-5">
|
||||
<div className="flex flex-start space-x-4">
|
||||
{/* Avatar */}
|
||||
<div className="shrink-0 mt-1.5">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage03} width="32" height="32" alt="User 03" />
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className="grow">
|
||||
{/* Title */}
|
||||
<h2 className="font-semibold text-slate-800 mb-2">
|
||||
<Link to="/community/forum-post">
|
||||
I built and sold 2 small SaaS products and quit my job in the last two years — AMA.
|
||||
</Link>
|
||||
</h2>
|
||||
{/* Footer */}
|
||||
<footer className="flex flex-wrap text-sm">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
markusj
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">2d</span>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">298 Comments</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{/* Upvote button */}
|
||||
<div className="shrink-0">
|
||||
<button className="text-xs font-semibold text-center h-12 w-12 border border-slate-200 hover:border-slate-300 rounded-sm flex flex-col justify-center items-center">
|
||||
<svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>217</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Post 5 */}
|
||||
<article className="bg-white shadow-md rounded border border-slate-200 p-5">
|
||||
<div className="flex flex-start space-x-4">
|
||||
{/* Avatar */}
|
||||
<div className="shrink-0 mt-1.5">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage04} width="32" height="32" alt="User 04" />
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className="grow">
|
||||
{/* Title */}
|
||||
<h2 className="font-semibold text-slate-800 mb-2">
|
||||
<Link to="/community/forum-post">
|
||||
Had a full-time job, bootstrapped a side project to 7 digit ARR, now building another side project—AMA
|
||||
</Link>
|
||||
</h2>
|
||||
{/* Footer */}
|
||||
<footer className="flex flex-wrap text-sm">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
davidp1
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">2d</span>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">312 Comments</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{/* Upvote button */}
|
||||
<div className="shrink-0">
|
||||
<button className="text-xs font-semibold text-center h-12 w-12 border border-slate-200 hover:border-slate-300 rounded-sm flex flex-col justify-center items-center">
|
||||
<svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>399</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Promoted post */}
|
||||
<article className="bg-amber-50 shadow-md rounded border border-amber-300 p-5">
|
||||
<div className="flex flex-start space-x-4">
|
||||
{/* Avatar */}
|
||||
<div className="shrink-0 mt-1.5">
|
||||
<svg className="w-8 h-8 rounded-full" width="32" height="32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#3B82F6" d="M0 0h32v32H0z" />
|
||||
<path
|
||||
d="M16.561 22c3.061 0 5.327-2.088 5.939-4.642h-3.449c-.367.69-1.04 1.5-2.449 1.5-1.612 0-2.694-1.216-2.694-2.858 0-1.622 1.082-2.94 2.694-2.858 1.408 0 2.082.81 2.449 1.581h3.429c-.572-2.757-3-4.723-6-4.723-3.388 0-5.98 2.676-5.98 5.98 0 3.344 2.633 6.02 6.061 6.02Z"
|
||||
fill="#EFF6FF"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className="grow">
|
||||
{/* Title */}
|
||||
<h2 className="font-semibold text-slate-800 mb-2">
|
||||
<Link to="/community/forum-post">
|
||||
💸 Trade crypto, fiat, and stablecoins with Crypto.io. Low fees and incredible performance!
|
||||
</Link>
|
||||
</h2>
|
||||
{/* Footer */}
|
||||
<footer className="flex flex-wrap text-sm">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
crypto.io
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500 italic">Promoted</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Post 6 */}
|
||||
<article className="bg-white shadow-md rounded border border-slate-200 p-5">
|
||||
<div className="flex flex-start space-x-4">
|
||||
{/* Avatar */}
|
||||
<div className="shrink-0 mt-1.5">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage05} width="32" height="32" alt="User 05" />
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className="grow">
|
||||
{/* Title */}
|
||||
<h2 className="font-semibold text-slate-800 mb-2">
|
||||
<Link to="/community/forum-post">Which are the main channels you use to drive traffic to your website? 📈</Link>
|
||||
</h2>
|
||||
{/* Footer */}
|
||||
<footer className="flex flex-wrap text-sm">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
sophiestar
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">3d</span>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">66 Comments</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{/* Upvote button */}
|
||||
<div className="shrink-0">
|
||||
<button className="text-xs font-semibold text-center h-12 w-12 border border-slate-200 hover:border-slate-300 rounded-sm flex flex-col justify-center items-center">
|
||||
<svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>31</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Post 7 */}
|
||||
<article className="bg-white shadow-md rounded border border-slate-200 p-5">
|
||||
<div className="flex flex-start space-x-4">
|
||||
{/* Avatar */}
|
||||
<div className="shrink-0 mt-1.5">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage06} width="32" height="32" alt="User 06" />
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className="grow">
|
||||
{/* Title */}
|
||||
<h2 className="font-semibold text-slate-800 mb-2">
|
||||
<Link to="/community/forum-post">
|
||||
How to build a following on Twitter as a founder - A guide to growing your audience 🚀
|
||||
</Link>
|
||||
</h2>
|
||||
{/* Footer */}
|
||||
<footer className="flex flex-wrap text-sm">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
molliehacks
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">3d</span>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">32 Comments</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{/* Upvote button */}
|
||||
<div className="shrink-0">
|
||||
<button className="text-xs font-semibold text-center h-12 w-12 border border-indigo-400 rounded-sm flex flex-col justify-center items-center outline outline-2 outline-indigo-100">
|
||||
<svg className="inline-flex fill-indigo-500 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>24</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Post 8 */}
|
||||
<article className="bg-white shadow-md rounded border border-slate-200 p-5">
|
||||
<div className="flex flex-start space-x-4">
|
||||
{/* Avatar */}
|
||||
<div className="shrink-0 mt-1.5">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage04} width="32" height="32" alt="User 04" />
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className="grow">
|
||||
{/* Title */}
|
||||
<h2 className="font-semibold text-slate-800 mb-2">
|
||||
<Link to="/community/forum-post">What's the best way to get started building web 3 social products?</Link>
|
||||
</h2>
|
||||
{/* Footer */}
|
||||
<footer className="flex flex-wrap text-sm">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
davidp1
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">4d</span>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">27 Comments</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{/* Upvote button */}
|
||||
<div className="shrink-0">
|
||||
<button className="text-xs font-semibold text-center h-12 w-12 border border-slate-200 hover:border-slate-300 rounded-sm flex flex-col justify-center items-center">
|
||||
<svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>22</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Post 9 */}
|
||||
<article className="bg-white shadow-md rounded border border-slate-200 p-5">
|
||||
<div className="flex flex-start space-x-4">
|
||||
{/* Avatar */}
|
||||
<div className="shrink-0 mt-1.5">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage07} width="32" height="32" alt="User 07" />
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className="grow">
|
||||
{/* Title */}
|
||||
<h2 className="font-semibold text-slate-800 mb-2">
|
||||
<Link to="/community/forum-post">How important is customer feedback for the improvement of a product?</Link>
|
||||
</h2>
|
||||
{/* Footer */}
|
||||
<footer className="flex flex-wrap text-sm">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
elenmisk
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">5d</span>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">61 Comments</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{/* Upvote button */}
|
||||
<div className="shrink-0">
|
||||
<button className="text-xs font-semibold text-center h-12 w-12 border border-slate-200 hover:border-slate-300 rounded-sm flex flex-col justify-center items-center">
|
||||
<svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>34</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ForumEntries;
|
||||
431
src/partials/community/ForumEntry.jsx
Normal file
431
src/partials/community/ForumEntry.jsx
Normal file
@@ -0,0 +1,431 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import UserAvatar from '../../images/user-40-02.jpg';
|
||||
import UserImage01 from '../../images/user-28-01.jpg';
|
||||
import UserImage02 from '../../images/user-28-02.jpg';
|
||||
import UserImage05 from '../../images/user-28-05.jpg';
|
||||
import UserImage09 from '../../images/user-28-09.jpg';
|
||||
import UserImage10 from '../../images/user-28-10.jpg';
|
||||
|
||||
function ForumEntry() {
|
||||
return (
|
||||
<article className="bg-white shadow-md rounded border border-slate-200 p-5">
|
||||
{/* Breadcrumbs */}
|
||||
<div className="mb-2">
|
||||
<ul className="inline-flex flex-wrap text-sm font-medium">
|
||||
<li className="flex items-center">
|
||||
<Link className="text-slate-500 hover:text-indigo-500" to="/community/forum">
|
||||
Home
|
||||
</Link>
|
||||
<svg className="h-4 w-4 fill-current text-slate-400 mx-2" viewBox="0 0 16 16">
|
||||
<path d="M6.6 13.4L5.2 12l4-4-4-4 1.4-1.4L12 8z" />
|
||||
</svg>
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<a className="text-slate-500 hover:text-indigo-500" href="#0">
|
||||
Discussion
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* Header */}
|
||||
<header className="pb-4">
|
||||
{/* Title */}
|
||||
<div className="flex items-start space-x-3 mb-3">
|
||||
<h2 className="text-2xl text-slate-800 font-bold">Besides Product Hunt, where else should I promote my new project? 🤔</h2>
|
||||
{/* Upvote button */}
|
||||
<div className="shrink-0">
|
||||
<button className="text-xs font-semibold text-center h-12 w-12 border border-slate-200 hover:border-slate-300 rounded-sm flex flex-col justify-center items-center">
|
||||
<svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>44</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Meta */}
|
||||
<div className="flex flex-wrap text-sm">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
katemerlu
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">2h</span>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<span className="text-slate-500">17 Comments</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{/* Content */}
|
||||
<div className="space-y-4 mb-6">
|
||||
<p>Looking for new ideas to get users, receive feedback, and increase exposure! Besides PH, where else do you showcase your product?</p>
|
||||
<p>Please advise 🙌</p>
|
||||
</div>
|
||||
{/* Comment form */}
|
||||
<div>
|
||||
<div className="flex items-start space-x-3 mb-3">
|
||||
<img className="rounded-full shrink-0" src={UserAvatar} width="40" height="40" alt="User 02" />
|
||||
<div className="grow">
|
||||
<label htmlFor="comment" className="sr-only">
|
||||
Write a comment…
|
||||
</label>
|
||||
<textarea
|
||||
id="comment"
|
||||
className="form-textarea w-full focus:border-slate-300"
|
||||
rows="4"
|
||||
placeholder="Write a comment…"
|
||||
defaultValue={''}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<button type="submit" className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white whitespace-nowrap">
|
||||
Reply ->
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Comments */}
|
||||
<div className="mt-4">
|
||||
<h3 className="font-semibold text-slate-800 mb-4">Comments</h3>
|
||||
<ul className="space-y-5">
|
||||
{/* Comment */}
|
||||
<li className="relative pl-9 space-y-5">
|
||||
{/* Comment wrapper */}
|
||||
<div className="flex items-start">
|
||||
{/* Comment upvote */}
|
||||
<div className="absolute top-0 left-0">
|
||||
<button className="text-xs font-semibold text-left w-6 rounded-sm flex flex-col justify-center items-center hover:text-indigo-500">
|
||||
<svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>44</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* Comment content */}
|
||||
<div>
|
||||
{/* Comment text */}
|
||||
<div className="grow text-sm text-slate-800 space-y-2 mb-2">
|
||||
<p>
|
||||
We've also had the same question to be honest. And for Appy.com launch we decided to go with Twitter as a primary medium and then
|
||||
Product Hunt as the other one. And I have to say that it led to some great results as Twitter allows you to be super active and
|
||||
engage in many conversations.
|
||||
</p>
|
||||
<p>Also, users are there and everything is super active. So that will be my advice - invest time in Twitter</p>
|
||||
</div>
|
||||
{/* Comment footer */}
|
||||
<div className="flex flex-wrap text-xs">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="block mr-2" href="#0">
|
||||
<img className="rounded-full" src={UserImage02} width="24" height="24" alt="User 02" />
|
||||
</a>
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
ekuplu89
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
|
||||
Reply
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
|
||||
Share
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Nested comments */}
|
||||
<ul className="space-y-5">
|
||||
{/* Comment */}
|
||||
<li className="relative pl-9 space-y-5">
|
||||
{/* Comment wrapper */}
|
||||
<div className="flex items-start">
|
||||
{/* Comment upvote */}
|
||||
<div className="absolute top-0 left-0">
|
||||
<button className="text-xs font-semibold text-left w-6 rounded-sm flex flex-col justify-center items-center hover:text-indigo-500">
|
||||
<svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>2</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* Comment content */}
|
||||
<div>
|
||||
{/* Comment text */}
|
||||
<div className="grow text-sm text-slate-800 space-y-2 mb-2">
|
||||
<p>
|
||||
That's great advice,{' '}
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
@ekuplu89
|
||||
</a>{' '}
|
||||
👏
|
||||
</p>
|
||||
</div>
|
||||
{/* Comment footer */}
|
||||
<div className="flex flex-wrap text-xs">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="block mr-2" href="#0">
|
||||
<img className="rounded-full" src={UserImage05} width="24" height="24" alt="User 05" />
|
||||
</a>
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
ellielong
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
|
||||
Reply
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
|
||||
Share
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{/* Comment */}
|
||||
<li className="relative pl-9 space-y-5">
|
||||
{/* Comment wrapper */}
|
||||
<div className="flex items-start">
|
||||
{/* Comment upvote */}
|
||||
<div className="absolute top-0 left-0">
|
||||
<button className="text-xs font-semibold text-left w-6 rounded-sm flex flex-col justify-center items-center">
|
||||
<svg className="inline-flex fill-indigo-500 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>27</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* Comment content */}
|
||||
<div>
|
||||
{/* Comment text */}
|
||||
<div className="grow text-sm text-slate-800 space-y-2 mb-2">
|
||||
<p>
|
||||
If you are a SaaS product and are looking for early adopters, AppSumo seems to be a great place to list on. Most of the users
|
||||
there seem to be early-adopters. Life-time deals seem to be the norm there.
|
||||
</p>
|
||||
</div>
|
||||
{/* Comment footer */}
|
||||
<div className="flex flex-wrap text-xs">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="block mr-2" href="#0">
|
||||
<img className="rounded-full" src={UserImage01} width="24" height="24" alt="User 01" />
|
||||
</a>
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
markcuttik
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
|
||||
Reply
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
|
||||
Share
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Comment */}
|
||||
<li className="relative pl-9 space-y-5">
|
||||
{/* Comment wrapper */}
|
||||
<div className="flex items-start">
|
||||
{/* Comment upvote */}
|
||||
<div className="absolute top-0 left-0">
|
||||
<button className="text-xs font-semibold text-left w-6 rounded-sm flex flex-col justify-center items-center hover:text-indigo-500">
|
||||
<svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>24</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* Comment content */}
|
||||
<div>
|
||||
{/* Comment text */}
|
||||
<div className="grow text-sm text-slate-800 space-y-2 mb-2">
|
||||
<p>
|
||||
Thank you very much for all the people who are posting other alt=""ernatives! I will launch my free product design course in
|
||||
February and I will make a notion template with all this information! :)
|
||||
</p>
|
||||
</div>
|
||||
{/* Comment footer */}
|
||||
<div className="flex flex-wrap text-xs">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="block mr-2" href="#0">
|
||||
<img className="rounded-full" src={UserImage09} width="24" height="24" alt="User 09" />
|
||||
</a>
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
davidp1
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
|
||||
Reply
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
|
||||
Share
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Nested comments */}
|
||||
<ul className="space-y-5">
|
||||
{/* Comment */}
|
||||
<li className="relative pl-9 space-y-5">
|
||||
{/* Comment wrapper */}
|
||||
<div className="flex items-start">
|
||||
{/* Comment upvote */}
|
||||
<div className="absolute top-0 left-0">
|
||||
<button className="text-xs font-semibold text-left w-6 rounded-sm flex flex-col justify-center items-center hover:text-indigo-500">
|
||||
<svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>2</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* Comment content */}
|
||||
<div>
|
||||
{/* Comment text */}
|
||||
<div className="grow text-sm text-slate-800 space-y-2 mb-2">
|
||||
<p>That sounds like an excellent idea. I'd love to take a look when you're ready!</p>
|
||||
</div>
|
||||
{/* Comment footer */}
|
||||
<div className="flex flex-wrap text-xs">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="block mr-2" href="#0">
|
||||
<img className="rounded-full" src={UserImage05} width="24" height="24" alt="User 05" />
|
||||
</a>
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
ellielong
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
|
||||
Reply
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
|
||||
Share
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Nested comments */}
|
||||
<ul className="space-y-5">
|
||||
{/* Comment */}
|
||||
<li className="relative pl-9 space-y-5">
|
||||
{/* Comment wrapper */}
|
||||
<div className="flex items-start">
|
||||
{/* Comment upvote */}
|
||||
<div className="absolute top-0 left-0">
|
||||
<button className="text-xs font-semibold text-left w-6 rounded-sm flex flex-col justify-center items-center hover:text-indigo-500">
|
||||
<svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>1</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* Comment content */}
|
||||
<div>
|
||||
{/* Comment text */}
|
||||
<div className="grow text-sm text-slate-800 space-y-2 mb-2">
|
||||
<p>Expect it! 👊</p>
|
||||
</div>
|
||||
{/* Comment footer */}
|
||||
<div className="flex flex-wrap text-xs">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="block mr-2" href="#0">
|
||||
<img className="rounded-full" src={UserImage09} width="24" height="24" alt="User 09" />
|
||||
</a>
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
davidp1
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
|
||||
Reply
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
|
||||
Share
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{/* Comment */}
|
||||
<li className="relative pl-9 space-y-5">
|
||||
{/* Comment wrapper */}
|
||||
<div className="flex items-start">
|
||||
{/* Comment upvote */}
|
||||
<div className="absolute top-0 left-0">
|
||||
<button className="text-xs font-semibold text-left w-6 rounded-sm flex flex-col justify-center items-center hover:text-indigo-500">
|
||||
<svg className="inline-flex fill-slate-400 mt-1.5 mb-1.5" width="12" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 6 6-6 6 6z" />
|
||||
</svg>
|
||||
<div>19</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* Comment content */}
|
||||
<div>
|
||||
{/* Comment text */}
|
||||
<div className="grow text-sm text-slate-800 space-y-2 mb-2">
|
||||
<p>Social Media (channels based on your target audience), and Slack channels</p>
|
||||
</div>
|
||||
{/* Comment footer */}
|
||||
<div className="flex flex-wrap text-xs">
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="block mr-2" href="#0">
|
||||
<img className="rounded-full" src={UserImage10} width="24" height="24" alt="User 10" />
|
||||
</a>
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
patrick2
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
|
||||
Reply
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center after:block after:content-['·'] last:after:content-[''] after:text-sm after:text-slate-400 after:px-2">
|
||||
<a className="font-medium text-slate-500 hover:text-slate-600" href="#0">
|
||||
Share
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
{/* View more link */}
|
||||
<div className="text-center mt-5">
|
||||
<button className="text-sm font-medium text-indigo-500 hover:text-indigo-600">View More Comments</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
export default ForumEntry;
|
||||
97
src/partials/community/ForumLeftContent.jsx
Normal file
97
src/partials/community/ForumLeftContent.jsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import React from 'react';
|
||||
|
||||
function ForumLeftContent() {
|
||||
return (
|
||||
<div className="w-full md:w-60 mb-8 md:mb-0">
|
||||
<div className="md:sticky md:top-16 md:h-[calc(100vh-64px)] md:overflow-x-hidden md:overflow-y-auto no-scrollbar">
|
||||
<div className="md:py-8">
|
||||
<div className="flex justify-between items-center md:block">
|
||||
{/* Title */}
|
||||
<header className="mb-6">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Forum ✨</h1>
|
||||
</header>
|
||||
|
||||
{/* Button */}
|
||||
<div className="xl:hidden mb-6">
|
||||
<button className="btn md:w-full bg-indigo-500 hover:bg-indigo-600 text-white">Create Post</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
<div className="flex flex-nowrap overflow-x-scroll no-scrollbar md:block md:overflow-auto px-4 md:space-y-3 -mx-4">
|
||||
{/* Group 1 */}
|
||||
<div>
|
||||
<div className="text-xs font-semibold text-slate-400 uppercase mb-3 md:sr-only">Menu</div>
|
||||
<ul className="flex flex-nowrap md:block mr-3 md:mr-0">
|
||||
<li className="mr-0.5 md:mr-0 md:mb-0.5">
|
||||
<a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap bg-white" href="#0">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-indigo-500 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M10 16h4c.6 0 1-.4 1-.998V6.016c0-.3-.1-.6-.4-.8L8.6.226c-.4-.3-.9-.3-1.3 0l-6 4.992c-.2.2-.3.5-.3.799v8.986C1 15.6 1.4 16 2 16h4c.6 0 1-.4 1-.998v-2.996h2v2.996c0 .599.4.998 1 .998Zm-4-5.99c-.6 0-1 .399-1 .998v2.995H3V6.515L8 2.32l5 4.194v7.488h-2v-2.995c0-.6-.4-.999-1-.999H6Z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-indigo-500">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="mr-0.5 md:mr-0 md:mb-0.5">
|
||||
<a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-slate-600">Reading List</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="mr-0.5 md:mr-0 md:mb-0.5">
|
||||
<a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M5 9h11v2H5V9zM0 9h3v2H0V9zm5 4h6v2H5v-2zm-5 0h3v2H0v-2zm5-8h7v2H5V5zM0 5h3v2H0V5zm5-4h11v2H5V1zM0 1h3v2H0V1z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-slate-600">Listings</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="mr-0.5 md:mr-0 md:mb-0.5">
|
||||
<a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M1 12a1 1 0 0 1-.707-1.704l4.496-4.493a1 1 0 0 1 1.413 0l3.29 3.287 4.79-4.785a1 1 0 1 1 1.413 1.412l-5.496 5.491a1 1 0 0 1-1.413 0L5.496 7.92l-3.79 3.787A1 1 0 0 1 .999 12Z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-slate-600">Podcasts</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* Group 2 */}
|
||||
<div>
|
||||
<div className="text-xs font-semibold text-slate-400 uppercase mb-3">My Groups</div>
|
||||
<ul className="flex flex-nowrap md:block mr-3 md:mr-0">
|
||||
<li className="mr-0.5 md:mr-0 md:mb-0.5">
|
||||
<a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
|
||||
<svg className="w-3 h-3 shrink-0 fill-current text-emerald-500 mr-3" viewBox="0 0 12 12">
|
||||
<path d="M6 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2A6 6 0 1 1 6 0a6 6 0 0 1 0 12Z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-slate-600">Startups</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="mr-0.5 md:mr-0 md:mb-0.5">
|
||||
<a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
|
||||
<svg className="w-3 h-3 shrink-0 fill-current text-rose-500 mr-3" viewBox="0 0 12 12">
|
||||
<path d="M6 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2A6 6 0 1 1 6 0a6 6 0 0 1 0 12Z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-slate-600">Javascript</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="mr-0.5 md:mr-0 md:mb-0.5">
|
||||
<a className="flex items-center px-2.5 py-2 rounded whitespace-nowrap" href="#0">
|
||||
<svg className="w-3 h-3 shrink-0 fill-current text-amber-500 mr-3" viewBox="0 0 12 12">
|
||||
<path d="M6 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2A6 6 0 1 1 6 0a6 6 0 0 1 0 12Z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-slate-600">Productivity</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ForumLeftContent;
|
||||
121
src/partials/community/ForumPostRightContent.jsx
Normal file
121
src/partials/community/ForumPostRightContent.jsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import React from 'react';
|
||||
|
||||
import UserImage from '../../images/user-40-04.jpg';
|
||||
|
||||
function ForumPostRightContent() {
|
||||
return (
|
||||
<div className="w-full hidden xl:block xl:w-72">
|
||||
<div className="lg:sticky lg:top-16 lg:h-[calc(100vh-64px)] lg:overflow-x-hidden lg:overflow-y-auto no-scrollbar">
|
||||
<div className="md:py-8">
|
||||
{/* Button */}
|
||||
<div className="mb-6">
|
||||
<button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white">Create Post</button>
|
||||
</div>
|
||||
|
||||
{/* Blocks */}
|
||||
<div className="space-y-4">
|
||||
|
||||
{/* Block 1 */}
|
||||
<div className="bg-slate-50 p-4 rounded border border-slate-200">
|
||||
<div className="text-xs font-semibold text-slate-400 uppercase mb-4">About the Author</div>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-10 h-10 shrink-0 mr-3">
|
||||
<img className="rounded-full" src={UserImage} width="40" height="40" alt="User 04" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-slate-800">Kate Merlu</div>
|
||||
<div className="text-sm text-slate-500 italic">Building SquareApp 🚀</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="text-sm space-y-2">
|
||||
<li>🤟 <span className="font-medium">1798</span> Karma</li>
|
||||
<li>🔥 <span className="font-medium">39</span> Posts</li>
|
||||
<li>✍️ <span className="font-medium">299</span> Comments</li>
|
||||
</ul>
|
||||
<div className="mt-4">
|
||||
<button className="btn-sm w-full bg-white border-slate-200 hover:border-slate-300 text-indigo-500 shadow-none">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Block 2 */}
|
||||
<div className="bg-slate-50 p-4 rounded border border-slate-200">
|
||||
<div className="text-xs font-semibold text-slate-400 uppercase mb-4">Popular Stories</div>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<div className="text-sm mb-1">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
I built and sold 2 small SaaS products and quit my job in the last two years — AMA
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
markusj
|
||||
</a>{' '}
|
||||
· 2d · 312 comments
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="text-sm mb-1">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
Besides Product Hunt, where else should I promote my new project? 🤔
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
katemerlu
|
||||
</a>{' '}
|
||||
· 2h · 7 comments
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="text-sm mb-1">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
Which are the main channels you use to drive traffic to your website? 📈
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
sophiestar
|
||||
</a>{' '}
|
||||
· 3d · 66 comments
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="text-sm mb-1">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
Failed for the past 12 years as a tech entrepreneur. My key takeaways.
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
ekuplu89
|
||||
</a>{' '}
|
||||
· 4h · 14 comments
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="text-sm mb-1">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
How to build a following on Twitter as a founder - A guide to growing your audience 🚀
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
molliehacks
|
||||
</a>{' '}
|
||||
· 3d · 32 comments
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-4">
|
||||
<button className="btn-sm w-full bg-white border-slate-200 hover:border-slate-300 text-indigo-500 shadow-none">View All</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ForumPostRightContent;
|
||||
286
src/partials/community/ForumRightContent.jsx
Normal file
286
src/partials/community/ForumRightContent.jsx
Normal file
@@ -0,0 +1,286 @@
|
||||
import React from 'react';
|
||||
|
||||
import UserImage01 from '../../images/avatar-01.jpg';
|
||||
import UserImage02 from '../../images/avatar-02.jpg';
|
||||
import UserImage03 from '../../images/avatar-03.jpg';
|
||||
import UserImage04 from '../../images/avatar-04.jpg';
|
||||
import UserImage05 from '../../images/avatar-05.jpg';
|
||||
import UserImage06 from '../../images/avatar-06.jpg';
|
||||
|
||||
function ForumRightContent() {
|
||||
return (
|
||||
<div className="w-full hidden xl:block xl:w-72">
|
||||
<div className="lg:sticky lg:top-16 lg:h-[calc(100vh-64px)] lg:overflow-x-hidden lg:overflow-y-auto no-scrollbar">
|
||||
<div className="md:py-8">
|
||||
{/* Button */}
|
||||
<div className="mb-6">
|
||||
<button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white">Create Post</button>
|
||||
</div>
|
||||
|
||||
{/* Blocks */}
|
||||
<div className="space-y-4">
|
||||
|
||||
{/* Block 1 */}
|
||||
<div className="bg-slate-50 p-4 rounded border border-slate-200">
|
||||
<div className="text-xs font-semibold text-slate-400 uppercase mb-4">Forum Meetups</div>
|
||||
<ul>
|
||||
{/* Event 1 */}
|
||||
<li className="relative pb-4 last-of-type:pb-0">
|
||||
<div className="pl-6">
|
||||
<div className="text-xs font-medium uppercase text-indigo-600 mb-0.5">Mon 27 Dec</div>
|
||||
<div className="text-sm mb-2">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
Silicon Valley Bootstrapper Breakfast Online for 2021
|
||||
</a>
|
||||
</div>
|
||||
{/* Avatars */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage02}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 02"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage03}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 03"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage04}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 04"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs font-medium text-slate-400 italic">+22</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Timeline element */}
|
||||
<div aria-hidden="true">
|
||||
<div className="absolute top-1 -bottom-1 left-0.5 ml-px w-0.5 bg-slate-200" />
|
||||
<div className="absolute top-1 left-0 ml- w-2 h-2 rounded-full bg-slate-400" />
|
||||
</div>
|
||||
</li>
|
||||
{/* Event 2 */}
|
||||
<li className="relative pb-4 last-of-type:pb-0">
|
||||
<div className="pl-6">
|
||||
<div className="text-xs font-medium uppercase text-indigo-600 mb-0.5">Mon 27 Dec</div>
|
||||
<div className="text-sm mb-2">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
New York & New Jersey Virtual Retreat
|
||||
</a>
|
||||
</div>
|
||||
{/* Avatars */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage01}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 01"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage04}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 04"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage05}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 05"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs font-medium text-slate-400 italic">+132</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Timeline element */}
|
||||
<div aria-hidden="true">
|
||||
<div className="absolute top-1 -bottom-1 left-0.5 ml-px w-0.5 bg-slate-200" />
|
||||
<div className="absolute top-1 left-0 ml- w-2 h-2 rounded-full bg-slate-400" />
|
||||
</div>
|
||||
</li>
|
||||
{/* Event 3 */}
|
||||
<li className="relative pb-4 last-of-type:pb-0">
|
||||
<div className="pl-6">
|
||||
<div className="text-xs font-medium uppercase text-indigo-600 mb-0.5">Mon 29 Dec</div>
|
||||
<div className="text-sm mb-2">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
The World of AI and Machine Learning - Open Chat
|
||||
</a>
|
||||
</div>
|
||||
{/* Avatars */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage06}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 06"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage03}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 03"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage01}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 01"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs font-medium text-slate-400 italic">+12</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Timeline element */}
|
||||
<div aria-hidden="true">
|
||||
<div className="absolute top-1 -bottom-1 left-0.5 ml-px w-0.5 bg-slate-200" />
|
||||
<div className="absolute top-1 left-0 ml- w-2 h-2 rounded-full bg-slate-400" />
|
||||
</div>
|
||||
</li>
|
||||
{/* Event 4 */}
|
||||
<li className="relative pb-4 last-of-type:pb-0">
|
||||
<div className="pl-6">
|
||||
<div className="text-xs font-medium uppercase text-indigo-600 mb-0.5">Mon 29 Dec</div>
|
||||
<div className="text-sm mb-2">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
NYC Code & Coffee 2.0 @ Freehold Brooklyn
|
||||
</a>
|
||||
</div>
|
||||
{/* Avatars */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage03}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 03"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage05}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 05"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage04}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 04"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs font-medium text-slate-400 italic">+17</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Timeline element */}
|
||||
<div aria-hidden="true">
|
||||
<div className="absolute top-1 -bottom-1 left-0.5 ml-px w-0.5 bg-slate-200" />
|
||||
<div className="absolute top-1 left-0 ml- w-2 h-2 rounded-full bg-slate-400" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-4">
|
||||
<button className="btn-sm w-full bg-white border-slate-200 hover:border-slate-300 text-indigo-500 shadow-none">View All</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Block 2 */}
|
||||
<div className="bg-slate-50 p-4 rounded border border-slate-200">
|
||||
<div className="text-xs font-semibold text-slate-400 uppercase mb-4">Popular Stories</div>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<div className="text-sm mb-1">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
I built and sold 2 small SaaS products and quit my job in the last two years — AMA
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
markusj
|
||||
</a>{' '}
|
||||
· 2d · 312 comments
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="text-sm mb-1">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
Besides Product Hunt, where else should I promote my new project? 🤔
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
katemerlu
|
||||
</a>{' '}
|
||||
· 2h · 7 comments
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="text-sm mb-1">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
Which are the main channels you use to drive traffic to your website? 📈
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
sophiestar
|
||||
</a>{' '}
|
||||
· 3d · 66 comments
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="text-sm mb-1">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
Failed for the past 12 years as a tech entrepreneur. My key takeaways.
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
ekuplu89
|
||||
</a>{' '}
|
||||
· 4h · 14 comments
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="text-sm mb-1">
|
||||
<a className="font-medium text-slate-800" href="#0">
|
||||
How to build a following on Twitter as a founder - A guide to growing your audience 🚀
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">
|
||||
<a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">
|
||||
molliehacks
|
||||
</a>{' '}
|
||||
· 3d · 32 comments
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-4">
|
||||
<button className="btn-sm w-full bg-white border-slate-200 hover:border-slate-300 text-indigo-500 shadow-none">View All</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ForumRightContent;
|
||||
582
src/partials/community/MeetupsPosts.jsx
Normal file
582
src/partials/community/MeetupsPosts.jsx
Normal file
@@ -0,0 +1,582 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import MeetupsThumb01 from '../../images/meetups-thumb-01.jpg';
|
||||
import MeetupsThumb02 from '../../images/meetups-thumb-02.jpg';
|
||||
import MeetupsThumb03 from '../../images/meetups-thumb-03.jpg';
|
||||
import MeetupsThumb04 from '../../images/meetups-thumb-04.jpg';
|
||||
import MeetupsThumb05 from '../../images/meetups-thumb-05.jpg';
|
||||
import MeetupsThumb06 from '../../images/meetups-thumb-06.jpg';
|
||||
import MeetupsThumb07 from '../../images/meetups-thumb-07.jpg';
|
||||
import MeetupsThumb08 from '../../images/meetups-thumb-08.jpg';
|
||||
import UserImage01 from '../../images/avatar-01.jpg';
|
||||
import UserImage02 from '../../images/avatar-02.jpg';
|
||||
import UserImage03 from '../../images/avatar-03.jpg';
|
||||
import UserImage04 from '../../images/avatar-04.jpg';
|
||||
import UserImage05 from '../../images/avatar-05.jpg';
|
||||
import UserImage06 from '../../images/avatar-06.jpg';
|
||||
|
||||
function MeetupsPosts() {
|
||||
return (
|
||||
<div className="grid xl:grid-cols-2 gap-6">
|
||||
|
||||
{/* Item 1 */}
|
||||
<article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
|
||||
{/* Image */}
|
||||
<Link className="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" to="/community/meetups-post">
|
||||
<img
|
||||
className="absolute object-cover object-center w-full h-full"
|
||||
src={MeetupsThumb01}
|
||||
width="220"
|
||||
height="236"
|
||||
alt="Meetup 01"
|
||||
/>
|
||||
{/* Like button */}
|
||||
<button className="absolute top-0 right-0 mt-4 mr-4">
|
||||
<div className="text-slate-100 bg-slate-900 bg-opacity-60 rounded-full">
|
||||
<span className="sr-only">Like</span>
|
||||
<svg className="h-8 w-8 fill-current" viewBox="0 0 32 32">
|
||||
<path d="M22.682 11.318A4.485 4.485 0 0019.5 10a4.377 4.377 0 00-3.5 1.707A4.383 4.383 0 0012.5 10a4.5 4.5 0 00-3.182 7.682L16 24l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L16 21.247l-5.285-5A2.5 2.5 0 0112.5 12c1.437 0 2.312.681 3.5 2.625C17.187 12.681 18.062 12 19.5 12a2.5 2.5 0 011.785 4.251h-.003z" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</Link>
|
||||
{/* Content */}
|
||||
<div className="grow p-5 flex flex-col">
|
||||
<div className="grow">
|
||||
<div className="text-sm font-semibold text-indigo-500 uppercase mb-2">Mon 27 Dec, 2021</div>
|
||||
<Link className="inline-flex mb-2" to="/community/meetups-post">
|
||||
<h3 className="text-lg font-bold text-slate-800">Silicon Valley Bootstrapper Breakfast Online for 2021</h3>
|
||||
</Link>
|
||||
<div className="text-sm">
|
||||
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.
|
||||
</div>
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<div className="flex justify-between mt-3">
|
||||
{/* Tag */}
|
||||
<div className="text-xs inline-flex items-center font-medium bg-slate-100 text-slate-600 rounded-full text-center px-2.5 py-1">
|
||||
<svg className="w-4 h-3 fill-slate-400 mr-2" viewBox="0 0 16 12">
|
||||
<path d="m16 2-4 2.4V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.6l4 2.4V2ZM2 10V2h8v8H2Z" />
|
||||
</svg>
|
||||
<span>Online Event</span>
|
||||
</div>
|
||||
{/* Avatars */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage01}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 01"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage04}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 04"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage05}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 05"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs font-medium text-slate-400 italic">+22</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Item 2 */}
|
||||
<article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
|
||||
{/* Image */}
|
||||
<Link className="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" to="/community/meetups-post">
|
||||
<img
|
||||
className="absolute object-cover object-center w-full h-full"
|
||||
src={MeetupsThumb02}
|
||||
width="220"
|
||||
height="236"
|
||||
alt="Meetup 02"
|
||||
/>
|
||||
{/* Like button */}
|
||||
<button className="absolute top-0 right-0 mt-4 mr-4">
|
||||
<div className="text-slate-100 bg-slate-900 bg-opacity-60 rounded-full">
|
||||
<span className="sr-only">Like</span>
|
||||
<svg className="h-8 w-8 fill-current" viewBox="0 0 32 32">
|
||||
<path d="M22.682 11.318A4.485 4.485 0 0019.5 10a4.377 4.377 0 00-3.5 1.707A4.383 4.383 0 0012.5 10a4.5 4.5 0 00-3.182 7.682L16 24l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L16 21.247l-5.285-5A2.5 2.5 0 0112.5 12c1.437 0 2.312.681 3.5 2.625C17.187 12.681 18.062 12 19.5 12a2.5 2.5 0 011.785 4.251h-.003z" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</Link>
|
||||
{/* Content */}
|
||||
<div className="grow p-5 flex flex-col">
|
||||
<div className="grow">
|
||||
<div className="text-sm font-semibold text-indigo-500 uppercase mb-2">Mon 27 Dec, 2021</div>
|
||||
<Link className="inline-flex mb-2" to="/community/meetups-post">
|
||||
<h3 className="text-lg font-bold text-slate-800">New York & New Jersey Virtual Retreat 2021</h3>
|
||||
</Link>
|
||||
<div className="text-sm">
|
||||
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.
|
||||
</div>
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<div className="flex justify-between mt-3">
|
||||
{/* Tag */}
|
||||
<div className="text-xs inline-flex items-center font-medium bg-slate-100 text-slate-600 rounded-full text-center px-2.5 py-1">
|
||||
<svg className="w-4 h-3 fill-slate-400 mr-2" viewBox="0 0 16 12">
|
||||
<path d="m16 2-4 2.4V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.6l4 2.4V2ZM2 10V2h8v8H2Z" />
|
||||
</svg>
|
||||
<span>Online Event</span>
|
||||
</div>
|
||||
{/* Avatars */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage02}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 02"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage03}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 03"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage04}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 04"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs font-medium text-slate-400 italic">+132</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Item 3 */}
|
||||
<article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
|
||||
{/* Image */}
|
||||
<Link className="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" to="/community/meetups-post">
|
||||
<img
|
||||
className="absolute object-cover object-center w-full h-full"
|
||||
src={MeetupsThumb03}
|
||||
width="220"
|
||||
height="236"
|
||||
alt="Meetup 03"
|
||||
/>
|
||||
{/* Like button */}
|
||||
<button className="absolute top-0 right-0 mt-4 mr-4">
|
||||
<div className="text-slate-100 bg-slate-900 bg-opacity-60 rounded-full">
|
||||
<span className="sr-only">Like</span>
|
||||
<svg className="h-8 w-8 fill-current" viewBox="0 0 32 32">
|
||||
<path d="M22.682 11.318A4.485 4.485 0 0019.5 10a4.377 4.377 0 00-3.5 1.707A4.383 4.383 0 0012.5 10a4.5 4.5 0 00-3.182 7.682L16 24l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L16 21.247l-5.285-5A2.5 2.5 0 0112.5 12c1.437 0 2.312.681 3.5 2.625C17.187 12.681 18.062 12 19.5 12a2.5 2.5 0 011.785 4.251h-.003z" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</Link>
|
||||
{/* Content */}
|
||||
<div className="grow p-5 flex flex-col">
|
||||
<div className="grow">
|
||||
<div className="text-sm font-semibold text-indigo-500 uppercase mb-2">Wed 29 Dec, 2021</div>
|
||||
<Link className="inline-flex mb-2" to="/community/meetups-post">
|
||||
<h3 className="text-lg font-bold text-slate-800">The World of AI and Machine Learning — Open Chat</h3>
|
||||
</Link>
|
||||
<div className="text-sm">
|
||||
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.
|
||||
</div>
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<div className="flex justify-between mt-3">
|
||||
{/* Tag */}
|
||||
<div className="text-xs inline-flex items-center font-medium bg-slate-100 text-slate-600 rounded-full text-center px-2.5 py-1">
|
||||
<svg className="w-4 h-3 fill-slate-400 mr-2" viewBox="0 0 16 12">
|
||||
<path d="m16 2-4 2.4V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.6l4 2.4V2ZM2 10V2h8v8H2Z" />
|
||||
</svg>
|
||||
<span>Online Event</span>
|
||||
</div>
|
||||
{/* Avatars */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage06}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 06"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage03}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 03"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage01}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 01"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs font-medium text-slate-400 italic">+12</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Item 4 */}
|
||||
<article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
|
||||
{/* Image */}
|
||||
<Link className="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" to="/community/meetups-post">
|
||||
<img
|
||||
className="absolute object-cover object-center w-full h-full"
|
||||
src={MeetupsThumb04}
|
||||
width="220"
|
||||
height="236"
|
||||
alt="Meetup 04"
|
||||
/>
|
||||
{/* Like button */}
|
||||
<button className="absolute top-0 right-0 mt-4 mr-4">
|
||||
<div className="text-slate-100 bg-slate-900 bg-opacity-60 rounded-full">
|
||||
<span className="sr-only">Like</span>
|
||||
<svg className="h-8 w-8 fill-current" viewBox="0 0 32 32">
|
||||
<path d="M22.682 11.318A4.485 4.485 0 0019.5 10a4.377 4.377 0 00-3.5 1.707A4.383 4.383 0 0012.5 10a4.5 4.5 0 00-3.182 7.682L16 24l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L16 21.247l-5.285-5A2.5 2.5 0 0112.5 12c1.437 0 2.312.681 3.5 2.625C17.187 12.681 18.062 12 19.5 12a2.5 2.5 0 011.785 4.251h-.003z" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</Link>
|
||||
{/* Content */}
|
||||
<div className="grow p-5 flex flex-col">
|
||||
<div className="grow">
|
||||
<div className="text-sm font-semibold text-indigo-500 uppercase mb-2">Wed 29 Dec, 2021</div>
|
||||
<Link className="inline-flex mb-2" to="/community/meetups-post">
|
||||
<h3 className="text-lg font-bold text-slate-800">NYC Code & Coffee 2.0 @ Freehold Brooklyn</h3>
|
||||
</Link>
|
||||
<div className="text-sm">
|
||||
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.
|
||||
</div>
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<div className="flex justify-between mt-3">
|
||||
{/* Tag */}
|
||||
<div className="text-xs inline-flex items-center font-medium bg-slate-100 text-slate-600 rounded-full text-center px-2.5 py-1">
|
||||
<svg className="w-4 h-3 fill-slate-400 mr-2" viewBox="0 0 16 12">
|
||||
<path d="m16 2-4 2.4V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.6l4 2.4V2ZM2 10V2h8v8H2Z" />
|
||||
</svg>
|
||||
<span>Online Event</span>
|
||||
</div>
|
||||
{/* Avatars */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage05}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 05"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage02}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 02"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs font-medium text-slate-400 italic">+17</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Item 5 */}
|
||||
<article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
|
||||
{/* Image */}
|
||||
<Link className="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" to="/community/meetups-post">
|
||||
<img
|
||||
className="absolute object-cover object-center w-full h-full"
|
||||
src={MeetupsThumb05}
|
||||
width="220"
|
||||
height="236"
|
||||
alt="Meetup 05"
|
||||
/>
|
||||
{/* Like button */}
|
||||
<button className="absolute top-0 right-0 mt-4 mr-4">
|
||||
<div className="text-slate-100 bg-slate-900 bg-opacity-60 rounded-full">
|
||||
<span className="sr-only">Like</span>
|
||||
<svg className="h-8 w-8 fill-current" viewBox="0 0 32 32">
|
||||
<path d="M22.682 11.318A4.485 4.485 0 0019.5 10a4.377 4.377 0 00-3.5 1.707A4.383 4.383 0 0012.5 10a4.5 4.5 0 00-3.182 7.682L16 24l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L16 21.247l-5.285-5A2.5 2.5 0 0112.5 12c1.437 0 2.312.681 3.5 2.625C17.187 12.681 18.062 12 19.5 12a2.5 2.5 0 011.785 4.251h-.003z" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</Link>
|
||||
{/* Content */}
|
||||
<div className="grow p-5 flex flex-col">
|
||||
<div className="grow">
|
||||
<div className="text-sm font-semibold text-indigo-500 uppercase mb-2">Mon 3 Jan, 2022</div>
|
||||
<Link className="inline-flex mb-2" to="/community/meetups-post">
|
||||
<h3 className="text-lg font-bold text-slate-800">Acme Inc. London Meetup: Women in Tech Night</h3>
|
||||
</Link>
|
||||
<div className="text-sm">
|
||||
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.
|
||||
</div>
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<div className="flex justify-between mt-3">
|
||||
{/* Tag */}
|
||||
<div className="text-xs inline-flex items-center font-medium bg-slate-100 text-slate-600 rounded-full text-center px-2.5 py-1">
|
||||
<svg className="w-4 h-3 fill-slate-400 mr-2" viewBox="0 0 16 12">
|
||||
<path d="m16 2-4 2.4V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.6l4 2.4V2ZM2 10V2h8v8H2Z" />
|
||||
</svg>
|
||||
<span>Online Event</span>
|
||||
</div>
|
||||
{/* Avatars */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage02}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 02"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage01}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 01"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs font-medium text-slate-400 italic">+117</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Item 6 */}
|
||||
<article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
|
||||
{/* Image */}
|
||||
<Link className="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" to="/community/meetups-post">
|
||||
<img
|
||||
className="absolute object-cover object-center w-full h-full"
|
||||
src={MeetupsThumb06}
|
||||
width="220"
|
||||
height="236"
|
||||
alt="Meetup 06"
|
||||
/>
|
||||
{/* Like button */}
|
||||
<button className="absolute top-0 right-0 mt-4 mr-4">
|
||||
<div className="text-slate-100 bg-slate-900 bg-opacity-60 rounded-full">
|
||||
<span className="sr-only">Like</span>
|
||||
<svg className="h-8 w-8 fill-current" viewBox="0 0 32 32">
|
||||
<path d="M22.682 11.318A4.485 4.485 0 0019.5 10a4.377 4.377 0 00-3.5 1.707A4.383 4.383 0 0012.5 10a4.5 4.5 0 00-3.182 7.682L16 24l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L16 21.247l-5.285-5A2.5 2.5 0 0112.5 12c1.437 0 2.312.681 3.5 2.625C17.187 12.681 18.062 12 19.5 12a2.5 2.5 0 011.785 4.251h-.003z" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</Link>
|
||||
{/* Content */}
|
||||
<div className="grow p-5 flex flex-col">
|
||||
<div className="grow">
|
||||
<div className="text-sm font-semibold text-indigo-500 uppercase mb-2">Thu 6 Jan, 2022</div>
|
||||
<Link className="inline-flex mb-2" to="/community/meetups-post">
|
||||
<h3 className="text-lg font-bold text-slate-800">Founder Worldwide - First Meetup of 2022!</h3>
|
||||
</Link>
|
||||
<div className="text-sm">
|
||||
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.
|
||||
</div>
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<div className="flex justify-between mt-3">
|
||||
{/* Tag */}
|
||||
<div className="text-xs inline-flex items-center font-medium bg-slate-100 text-slate-600 rounded-full text-center px-2.5 py-1">
|
||||
<svg className="w-4 h-3 fill-slate-400 mr-2" viewBox="0 0 16 12">
|
||||
<path d="m16 2-4 2.4V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.6l4 2.4V2ZM2 10V2h8v8H2Z" />
|
||||
</svg>
|
||||
<span>Online Event</span>
|
||||
</div>
|
||||
{/* Avatars */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage03}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 03"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage05}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 05"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage04}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 04"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs font-medium text-slate-400 italic">+64</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Item 7 */}
|
||||
<article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
|
||||
{/* Image */}
|
||||
<Link className="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" to="/community/meetups-post">
|
||||
<img
|
||||
className="absolute object-cover object-center w-full h-full"
|
||||
src={MeetupsThumb07}
|
||||
width="220"
|
||||
height="236"
|
||||
alt="Meetup 07"
|
||||
/>
|
||||
{/* Like button */}
|
||||
<button className="absolute top-0 right-0 mt-4 mr-4">
|
||||
<div className="text-slate-100 bg-slate-900 bg-opacity-60 rounded-full">
|
||||
<span className="sr-only">Like</span>
|
||||
<svg className="h-8 w-8 fill-current" viewBox="0 0 32 32">
|
||||
<path d="M22.682 11.318A4.485 4.485 0 0019.5 10a4.377 4.377 0 00-3.5 1.707A4.383 4.383 0 0012.5 10a4.5 4.5 0 00-3.182 7.682L16 24l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L16 21.247l-5.285-5A2.5 2.5 0 0112.5 12c1.437 0 2.312.681 3.5 2.625C17.187 12.681 18.062 12 19.5 12a2.5 2.5 0 011.785 4.251h-.003z" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</Link>
|
||||
{/* Content */}
|
||||
<div className="grow p-5 flex flex-col">
|
||||
<div className="grow">
|
||||
<div className="text-sm font-semibold text-indigo-500 uppercase mb-2">Thu 6 Jan, 2022</div>
|
||||
<Link className="inline-flex mb-2" to="/community/meetups-post">
|
||||
<h3 className="text-lg font-bold text-slate-800">NYC Blockchain Network - Monthly 3rd Thursday Meetup</h3>
|
||||
</Link>
|
||||
<div className="text-sm">
|
||||
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.
|
||||
</div>
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<div className="flex justify-between mt-3">
|
||||
{/* Tag */}
|
||||
<div className="text-xs inline-flex items-center font-medium bg-slate-100 text-slate-600 rounded-full text-center px-2.5 py-1">
|
||||
<svg className="w-4 h-3 fill-slate-400 mr-2" viewBox="0 0 16 12">
|
||||
<path d="m16 2-4 2.4V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.6l4 2.4V2ZM2 10V2h8v8H2Z" />
|
||||
</svg>
|
||||
<span>Online Event</span>
|
||||
</div>
|
||||
{/* Avatars */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage02}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 02"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage04}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 04"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs font-medium text-slate-400 italic">+112</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Item 8 */}
|
||||
<article className="flex bg-white shadow-lg rounded-sm border border-slate-200 overflow-hidden">
|
||||
{/* Image */}
|
||||
<Link className="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" to="/community/meetups-post">
|
||||
<img
|
||||
className="absolute object-cover object-center w-full h-full"
|
||||
src={MeetupsThumb08}
|
||||
width="220"
|
||||
height="236"
|
||||
alt="Meetup 08"
|
||||
/>
|
||||
{/* Like button */}
|
||||
<button className="absolute top-0 right-0 mt-4 mr-4">
|
||||
<div className="text-slate-100 bg-slate-900 bg-opacity-60 rounded-full">
|
||||
<span className="sr-only">Like</span>
|
||||
<svg className="h-8 w-8 fill-current" viewBox="0 0 32 32">
|
||||
<path d="M22.682 11.318A4.485 4.485 0 0019.5 10a4.377 4.377 0 00-3.5 1.707A4.383 4.383 0 0012.5 10a4.5 4.5 0 00-3.182 7.682L16 24l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L16 21.247l-5.285-5A2.5 2.5 0 0112.5 12c1.437 0 2.312.681 3.5 2.625C17.187 12.681 18.062 12 19.5 12a2.5 2.5 0 011.785 4.251h-.003z" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</Link>
|
||||
{/* Content */}
|
||||
<div className="grow p-5 flex flex-col">
|
||||
<div className="grow">
|
||||
<div className="text-sm font-semibold text-indigo-500 uppercase mb-2">Fri 7 Jan, 2022</div>
|
||||
<Link className="inline-flex mb-2" to="/community/meetups-post">
|
||||
<h3 className="text-lg font-bold text-slate-800">Build a Personal Brand and Boost Your Career in AI!</h3>
|
||||
</Link>
|
||||
<div className="text-sm">
|
||||
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.
|
||||
</div>
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<div className="flex justify-between mt-3">
|
||||
{/* Tag */}
|
||||
<div className="text-xs inline-flex items-center font-medium bg-slate-100 text-slate-600 rounded-full text-center px-2.5 py-1">
|
||||
<svg className="w-4 h-3 fill-slate-400 mr-2" viewBox="0 0 16 12">
|
||||
<path d="m16 2-4 2.4V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.6l4 2.4V2ZM2 10V2h8v8H2Z" />
|
||||
</svg>
|
||||
<span>Online Event</span>
|
||||
</div>
|
||||
{/* Avatars */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage01}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 01"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage05}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 05"
|
||||
/>
|
||||
<img
|
||||
className="rounded-full border-2 border-white box-content"
|
||||
src={UserImage06}
|
||||
width="28"
|
||||
height="28"
|
||||
alt="User 06"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs font-medium text-slate-400 italic">+32</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MeetupsPosts;
|
||||
343
src/partials/community/ProfileBody.jsx
Normal file
343
src/partials/community/ProfileBody.jsx
Normal file
@@ -0,0 +1,343 @@
|
||||
import React from 'react';
|
||||
|
||||
import ProfileBg from '../../images/profile-bg.jpg';
|
||||
import UserAvatar from '../../images/user-128-01.jpg';
|
||||
import Icon02 from '../../images/icon-02.svg';
|
||||
import Icon03 from '../../images/icon-03.svg';
|
||||
import UserImage01 from '../../images/avatar-01.jpg';
|
||||
import UserImage02 from '../../images/avatar-02.jpg';
|
||||
import UserImage03 from '../../images/avatar-03.jpg';
|
||||
import UserImage04 from '../../images/avatar-04.jpg';
|
||||
import UserImage05 from '../../images/avatar-05.jpg';
|
||||
import UserImage06 from '../../images/avatar-06.jpg';
|
||||
|
||||
function ProfileBody({
|
||||
profileSidebarOpen,
|
||||
setProfileSidebarOpen
|
||||
}) {
|
||||
return (
|
||||
<div className={`grow flex flex-col md:translate-x-0 transform transition-transform duration-300 ease-in-out ${profileSidebarOpen ? 'translate-x-1/3' : 'translate-x-0'}`}>
|
||||
|
||||
{/* Profile background */}
|
||||
<div className="relative h-56 bg-slate-200">
|
||||
<img className="object-cover h-full w-full" src={ProfileBg} width="979" height="220" alt="Profile background" />
|
||||
{/* Close button */}
|
||||
<button
|
||||
className="md:hidden absolute top-4 left-4 sm:left-6 text-white opacity-80 hover:opacity-100"
|
||||
onClick={() => setProfileSidebarOpen(!profileSidebarOpen)}
|
||||
aria-controls="profile-sidebar"
|
||||
aria-expanded={profileSidebarOpen}
|
||||
>
|
||||
<span className="sr-only">Close sidebar</span>
|
||||
<svg className="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.7 18.7l1.4-1.4L7.8 13H20v-2H7.8l4.3-4.3-1.4-1.4L4 12z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative px-4 sm:px-6 pb-8">
|
||||
|
||||
{/* Pre-header */}
|
||||
<div className="-mt-16 mb-6 sm:mb-3">
|
||||
|
||||
<div className="flex flex-col items-center sm:flex-row sm:justify-between sm:items-end">
|
||||
|
||||
{/* Avatar */}
|
||||
<div className="inline-flex -ml-1 -mt-1 mb-4 sm:mb-0">
|
||||
<img className="rounded-full border-4 border-white" src={UserAvatar} width="128" height="128" alt="Avatar" />
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex space-x-2 sm:mb-2">
|
||||
<button className="p-1.5 shrink-0 rounded border border-slate-200 hover:border-slate-300 shadow-sm">
|
||||
<svg className="w-4 h-1 fill-current text-slate-400" viewBox="0 0 16 4">
|
||||
<circle cx="8" cy="2" r="2" />
|
||||
<circle cx="2" cy="2" r="2" />
|
||||
<circle cx="14" cy="2" r="2" />
|
||||
</svg>
|
||||
</button>
|
||||
<button className="p-1.5 shrink-0 rounded border border-slate-200 hover:border-slate-300 shadow-sm">
|
||||
<svg className="w-4 h-4 fill-current text-indigo-500" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7Zm4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8Z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">
|
||||
<svg className="fill-current shrink-0" width="11" height="8" viewBox="0 0 11 8">
|
||||
<path d="m.457 4.516.969-.99 2.516 2.481L9.266.702l.985.99-6.309 6.284z" />
|
||||
</svg>
|
||||
<span className="ml-2">Following</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<header className="text-center sm:text-left mb-6">
|
||||
{/* Name */}
|
||||
<div className="inline-flex items-start mb-2">
|
||||
<h1 className="text-2xl text-slate-800 font-bold">Carolyn McNeail</h1>
|
||||
<svg className="w-4 h-4 fill-current shrink-0 text-amber-500 ml-2" viewBox="0 0 16 16">
|
||||
<path d="M13 6a.75.75 0 0 1-.75-.75 1.5 1.5 0 0 0-1.5-1.5.75.75 0 1 1 0-1.5 1.5 1.5 0 0 0 1.5-1.5.75.75 0 1 1 1.5 0 1.5 1.5 0 0 0 1.5 1.5.75.75 0 1 1 0 1.5 1.5 1.5 0 0 0-1.5 1.5A.75.75 0 0 1 13 6ZM6 16a1 1 0 0 1-1-1 4 4 0 0 0-4-4 1 1 0 0 1 0-2 4 4 0 0 0 4-4 1 1 0 1 1 2 0 4 4 0 0 0 4 4 1 1 0 0 1 0 2 4 4 0 0 0-4 4 1 1 0 0 1-1 1Z" />
|
||||
</svg>
|
||||
</div>
|
||||
{/* Bio */}
|
||||
<div className="text-sm mb-3">Fitness Fanatic, Design Enthusiast, Mentor, Meetup Organizer & PHP Lover.</div>
|
||||
{/* Meta */}
|
||||
<div className="flex flex-wrap justify-center sm:justify-start space-x-4">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 fill-current shrink-0 text-slate-400" viewBox="0 0 16 16">
|
||||
<path d="M8 8.992a2 2 0 1 1-.002-3.998A2 2 0 0 1 8 8.992Zm-.7 6.694c-.1-.1-4.2-3.696-4.2-3.796C1.7 10.69 1 8.892 1 6.994 1 3.097 4.1 0 8 0s7 3.097 7 6.994c0 1.898-.7 3.697-2.1 4.996-.1.1-4.1 3.696-4.2 3.796-.4.3-1 .3-1.4-.1Zm-2.7-4.995L8 13.688l3.4-2.997c1-1 1.6-2.198 1.6-3.597 0-2.798-2.2-4.996-5-4.996S3 4.196 3 6.994c0 1.399.6 2.698 1.6 3.697 0-.1 0-.1 0 0Z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium whitespace-nowrap text-slate-500 ml-2">Milan, IT</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 fill-current shrink-0 text-slate-400" viewBox="0 0 16 16">
|
||||
<path d="M11 0c1.3 0 2.6.5 3.5 1.5 1 .9 1.5 2.2 1.5 3.5 0 1.3-.5 2.6-1.4 3.5l-1.2 1.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.1-1.2c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.2C12 1.7 10 1.7 8.9 2.8L7.7 4c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l1.2-1.1C8.4.5 9.7 0 11 0ZM8.3 12c.4-.4 1-.5 1.4-.1.4.4.4 1 0 1.4l-1.2 1.2C7.6 15.5 6.3 16 5 16c-1.3 0-2.6-.5-3.5-1.5C.5 13.6 0 12.3 0 11c0-1.3.5-2.6 1.5-3.5l1.1-1.2c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4L2.9 8.9c-.6.5-.9 1.3-.9 2.1s.3 1.6.9 2.2c1.1 1.1 3.1 1.1 4.2 0L8.3 12Zm1.1-6.8c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-4.2 4.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l4.2-4.2Z" />
|
||||
</svg>
|
||||
<a className="text-sm font-medium whitespace-nowrap text-indigo-500 hover:text-indigo-600 ml-2" href="#0">carolinmcneail.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="relative mb-6">
|
||||
<div className="absolute bottom-0 w-full h-px bg-slate-200" aria-hidden="true"></div>
|
||||
<ul className="relative text-sm font-medium flex flex-nowrap -mx-4 sm:-mx-6 lg:-mx-8 overflow-x-scroll no-scrollbar">
|
||||
<li className="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="block pb-3 text-indigo-500 whitespace-nowrap border-b-2 border-indigo-500" href="#0">General</a>
|
||||
</li>
|
||||
<li className="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="block pb-3 text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Connections</a>
|
||||
</li>
|
||||
<li className="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="block pb-3 text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Contributions</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Profile content */}
|
||||
<div className="flex flex-col xl:flex-row xl:space-x-16">
|
||||
|
||||
{/* Main content */}
|
||||
<div className="space-y-5 mb-8 xl:mb-0">
|
||||
|
||||
{/* About Me */}
|
||||
<div>
|
||||
<h2 className="text-slate-800 font-semibold mb-2">About Me</h2>
|
||||
<div className="text-sm space-y-2">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
|
||||
<p>Consectetur adipiscing elit, sed do eiusmod tempor magna aliqua.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Departments */}
|
||||
<div>
|
||||
<h2 className="text-slate-800 font-semibold mb-2">Departments</h2>
|
||||
{/* Cards */}
|
||||
<div className="grid xl:grid-cols-2 gap-4">
|
||||
|
||||
{/* Card */}
|
||||
<div className="bg-white p-4 border border-slate-200 rounded-sm shadow-sm">
|
||||
{/* Card header */}
|
||||
<div className="grow flex items-center truncate mb-2">
|
||||
<div className="w-8 h-8 shrink-0 flex items-center justify-center bg-slate-700 rounded-full mr-2">
|
||||
<img className="ml-1" src={Icon03} width="14" height="14" alt="Icon 03" />
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">Acme Marketing</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Card content */}
|
||||
<div className="text-sm mb-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</div>
|
||||
{/* Card footer */}
|
||||
<div className="flex justify-between items-center">
|
||||
{/* Avatars group */}
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img className="rounded-full border-2 border-white box-content" src={UserImage02} width="24" height="24" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={UserImage03} width="24" height="24" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={UserImage04} width="24" height="24" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={UserImage05} width="24" height="24" alt="Avatar" />
|
||||
</div>
|
||||
{/* Link */}
|
||||
<div>
|
||||
<a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">View -></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card */}
|
||||
<div className="bg-white p-4 border border-slate-200 rounded-sm shadow-sm">
|
||||
{/* Card header */}
|
||||
<div className="grow flex items-center truncate mb-2">
|
||||
<div className="w-8 h-8 shrink-0 flex items-center justify-center bg-slate-700 rounded-full mr-2">
|
||||
<img className="ml-1" src={Icon02} width="14" height="14" alt="Icon 02" />
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">Acme Product</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Card content */}
|
||||
<div className="text-sm mb-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</div>
|
||||
{/* Card footer */}
|
||||
<div className="flex justify-between items-center">
|
||||
{/* Avatars group */}
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img className="rounded-full border-2 border-white box-content" src={UserImage06} width="24" height="24" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={UserImage03} width="24" height="24" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={UserImage01} width="24" height="24" alt="Avatar" />
|
||||
</div>
|
||||
{/* Link */}
|
||||
<div>
|
||||
<a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">View -></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Work History */}
|
||||
<div>
|
||||
<h2 className="text-slate-800 font-semibold mb-2">Work History</h2>
|
||||
<div className="bg-white p-4 border border-slate-200 rounded-sm shadow-sm">
|
||||
<ul className="space-y-3">
|
||||
|
||||
{/* Item */}
|
||||
<li className="sm:flex sm:items-center sm:justify-between">
|
||||
<div className="sm:grow flex items-center text-sm">
|
||||
{/* Icon */}
|
||||
<div className="w-8 h-8 rounded-full shrink-0 bg-amber-500 my-2 mr-3">
|
||||
<svg className="w-8 h-8 fill-current text-amber-50" viewBox="0 0 32 32">
|
||||
<path d="M21 14a.75.75 0 0 1-.75-.75 1.5 1.5 0 0 0-1.5-1.5.75.75 0 1 1 0-1.5 1.5 1.5 0 0 0 1.5-1.5.75.75 0 1 1 1.5 0 1.5 1.5 0 0 0 1.5 1.5.75.75 0 1 1 0 1.5 1.5 1.5 0 0 0-1.5 1.5.75.75 0 0 1-.75.75Zm-7 10a1 1 0 0 1-1-1 4 4 0 0 0-4-4 1 1 0 0 1 0-2 4 4 0 0 0 4-4 1 1 0 0 1 2 0 4 4 0 0 0 4 4 1 1 0 0 1 0 2 4 4 0 0 0-4 4 1 1 0 0 1-1 1Z" />
|
||||
</svg>
|
||||
</div>
|
||||
{/* Position */}
|
||||
<div>
|
||||
<div className="font-medium text-slate-800">Senior Product Designer</div>
|
||||
<div className="flex flex-nowrap items-center space-x-2 whitespace-nowrap">
|
||||
<div>Remote</div>
|
||||
<div className="text-slate-400">·</div>
|
||||
<div>April, 2020 - Today</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Tags */}
|
||||
<div className="sm:ml-2 mt-2 sm:mt-0">
|
||||
<ul className="flex flex-wrap sm:justify-end -m-1">
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-xs font-medium leading-5 rounded-full px-2.5 py-0.5 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Marketing</button>
|
||||
</li>
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-xs font-medium leading-5 rounded-full px-2.5 py-0.5 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">+4</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{/* Item */}
|
||||
<li className="sm:flex sm:items-center sm:justify-between">
|
||||
<div className="sm:grow flex items-center text-sm">
|
||||
{/* Icon */}
|
||||
<div className="w-8 h-8 rounded-full shrink-0 bg-indigo-500 my-2 mr-3">
|
||||
<svg className="w-8 h-8 fill-current text-indigo-50" viewBox="0 0 32 32">
|
||||
<path d="M8.994 20.006a1 1 0 0 1-.707-1.707l4.5-4.5a1 1 0 0 1 1.414 0l3.293 3.293 4.793-4.793a1 1 0 1 1 1.414 1.414l-5.5 5.5a1 1 0 0 1-1.414 0l-3.293-3.293L9.7 19.713a1 1 0 0 1-.707.293Z" />
|
||||
</svg>
|
||||
</div>
|
||||
{/* Position */}
|
||||
<div>
|
||||
<div className="font-medium text-slate-800">Product Designer</div>
|
||||
<div className="flex flex-nowrap items-center space-x-2 whitespace-nowrap">
|
||||
<div>Milan, IT</div>
|
||||
<div className="text-slate-400">·</div>
|
||||
<div>April, 2018 - April 2020</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Tags */}
|
||||
<div className="sm:ml-2 mt-2 sm:mt-0">
|
||||
<ul className="flex flex-wrap sm:justify-end -m-1">
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-xs font-medium leading-5 rounded-full px-2.5 py-0.5 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Marketing</button>
|
||||
</li>
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-xs font-medium leading-5 rounded-full px-2.5 py-0.5 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">+4</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{/* Item */}
|
||||
<li className="sm:flex sm:items-center sm:justify-between">
|
||||
<div className="sm:grow flex items-center text-sm">
|
||||
{/* Icon */}
|
||||
<div className="w-8 h-8 rounded-full shrink-0 bg-indigo-500 my-2 mr-3">
|
||||
<svg className="w-8 h-8 fill-current text-indigo-50" viewBox="0 0 32 32">
|
||||
<path d="M8.994 20.006a1 1 0 0 1-.707-1.707l4.5-4.5a1 1 0 0 1 1.414 0l3.293 3.293 4.793-4.793a1 1 0 1 1 1.414 1.414l-5.5 5.5a1 1 0 0 1-1.414 0l-3.293-3.293L9.7 19.713a1 1 0 0 1-.707.293Z" />
|
||||
</svg>
|
||||
</div>
|
||||
{/* Position */}
|
||||
<div>
|
||||
<div className="font-medium text-slate-800">Product Designer</div>
|
||||
<div className="flex flex-nowrap items-center space-x-2 whitespace-nowrap">
|
||||
<div>Milan, IT</div>
|
||||
<div className="text-slate-400">·</div>
|
||||
<div>April, 2018 - April 2020</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Tags */}
|
||||
<div className="sm:ml-2 mt-2 sm:mt-0">
|
||||
<ul className="flex flex-wrap sm:justify-end -m-1">
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-xs font-medium leading-5 rounded-full px-2.5 py-0.5 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Marketing</button>
|
||||
</li>
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-xs font-medium leading-5 rounded-full px-2.5 py-0.5 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">+4</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<aside className="xl:min-w-56 xl:w-56 space-y-3">
|
||||
<div className="text-sm">
|
||||
<h3 className="font-medium text-slate-800">Title</h3>
|
||||
<div>Senior Product Designer</div>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<h3 className="font-medium text-slate-800">Location</h3>
|
||||
<div>Milan, IT - Remote</div>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<h3 className="font-medium text-slate-800">Email</h3>
|
||||
<div>carolinmcneail@acme.com</div>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<h3 className="font-medium text-slate-800">Birthdate</h3>
|
||||
<div>4 April, 1987</div>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<h3 className="font-medium text-slate-800">Joined Acme</h3>
|
||||
<div>7 April, 2017</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProfileBody;
|
||||
161
src/partials/community/ProfileSidebar.jsx
Normal file
161
src/partials/community/ProfileSidebar.jsx
Normal file
@@ -0,0 +1,161 @@
|
||||
import React from 'react';
|
||||
|
||||
import ProfileImage from '../../images/user-avatar-32.png';
|
||||
import UserImage01 from '../../images/user-32-01.jpg';
|
||||
import UserImage02 from '../../images/user-32-02.jpg';
|
||||
import UserImage03 from '../../images/user-32-03.jpg';
|
||||
import UserImage04 from '../../images/user-32-04.jpg';
|
||||
import UserImage05 from '../../images/user-32-05.jpg';
|
||||
import UserImage06 from '../../images/user-32-06.jpg';
|
||||
import UserImage08 from '../../images/user-32-08.jpg';
|
||||
|
||||
function ProfileSidebar({
|
||||
profileSidebarOpen,
|
||||
setProfileSidebarOpen
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
id="profile-sidebar"
|
||||
className={`absolute z-20 top-0 bottom-0 w-full md:w-auto md:static md:top-auto md:bottom-auto -mr-px md:translate-x-0 transform transition-transform duration-200 ease-in-out ${profileSidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}
|
||||
>
|
||||
<div className="sticky top-16 bg-white overflow-x-hidden overflow-y-auto no-scrollbar shrink-0 border-r border-slate-200 md:w-72 xl:w-80 h-[calc(100vh-64px)]">
|
||||
|
||||
{/* Profile group */}
|
||||
<div>
|
||||
{/* Group header */}
|
||||
<div className="sticky top-0 z-10">
|
||||
<div className="flex items-center bg-white border-b border-slate-200 px-5 h-16">
|
||||
<div className="w-full flex items-center justify-between">
|
||||
{/* Profile image */}
|
||||
<div className="relative">
|
||||
<div className="grow flex items-center truncate">
|
||||
<img className="w-8 h-8 rounded-full mr-2" src={ProfileImage} width="32" height="32" alt="Group 01" />
|
||||
<div className="truncate">
|
||||
<span className="font-semibold text-slate-800">Acme Inc.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Add button */}
|
||||
<button className="p-1.5 shrink-0 rounded border border-slate-200 hover:border-slate-300 shadow-sm ml-2">
|
||||
<svg className="w-4 h-4 fill-current text-indigo-500" viewBox="0 0 16 16">
|
||||
<path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1Z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Group body */}
|
||||
<div className="px-5 py-4">
|
||||
{/* Search form */}
|
||||
<form className="relative">
|
||||
<label htmlFor="profile-search" className="sr-only">Search</label>
|
||||
<input id="profile-search" className="form-input w-full pl-9 focus:border-slate-300" type="search" placeholder="Search…" />
|
||||
<button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
|
||||
<path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
{/* Team members */}
|
||||
<div className="mt-4">
|
||||
<div className="text-xs font-semibold text-slate-400 uppercase mb-3">Team members</div>
|
||||
<ul className="mb-6">
|
||||
<li className="-mx-2">
|
||||
<button className="w-full p-2 rounded bg-indigo-100" onClick={() => setProfileSidebarOpen(false)}>
|
||||
<div className="flex items-center">
|
||||
<div className="relative mr-2">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage08} width="32" height="32" alt="User 08" />
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">Carolyn McNeail</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li className="-mx-2">
|
||||
<button className="w-full p-2 rounded" onClick={() => setProfileSidebarOpen(false)}>
|
||||
<div className="flex items-center truncate">
|
||||
<div className="relative mr-2">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage06} width="32" height="32" alt="User 06" />
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">Mary Roszczewski</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li className="-mx-2">
|
||||
<button className="w-full p-2 rounded" onClick={() => setProfileSidebarOpen(false)}>
|
||||
<div className="flex items-center truncate">
|
||||
<div className="relative mr-2">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage03} width="32" height="32" alt="User 03" />
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">Jerzy Wierzy</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li className="-mx-2">
|
||||
<button className="w-full p-2 rounded" onClick={() => setProfileSidebarOpen(false)}>
|
||||
<div className="flex items-center truncate">
|
||||
<div className="relative mr-2">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage02} width="32" height="32" alt="User 02" />
|
||||
<div className="absolute top-0 right-0 w-2.5 h-2.5 bg-emerald-500 border-2 border-white rounded-full"></div>
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">Tisha Yanchev</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li className="-mx-2">
|
||||
<button className="w-full p-2 rounded" onClick={() => setProfileSidebarOpen(false)}>
|
||||
<div className="flex items-center truncate">
|
||||
<div className="relative mr-2">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage05} width="32" height="32" alt="User 05" />
|
||||
<div className="absolute top-0 right-0 w-2.5 h-2.5 bg-emerald-500 border-2 border-white rounded-full"></div>
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">Simona Lürwer</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li className="-mx-2">
|
||||
<button className="w-full p-2 rounded" onClick={() => setProfileSidebarOpen(false)}>
|
||||
<div className="flex items-center truncate">
|
||||
<div className="relative mr-2">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage04} width="32" height="32" alt="User 04" />
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">Adrian Przetocki</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li className="-mx-2">
|
||||
<button className="w-full p-2 rounded" onClick={() => setProfileSidebarOpen(false)}>
|
||||
<div className="flex items-center truncate">
|
||||
<div className="relative mr-2">
|
||||
<img className="w-8 h-8 rounded-full" src={UserImage01} width="32" height="32" alt="User 01" />
|
||||
<div className="absolute top-0 right-0 w-2.5 h-2.5 bg-emerald-500 border-2 border-white rounded-full"></div>
|
||||
</div>
|
||||
<div className="truncate">
|
||||
<span className="text-sm font-medium text-slate-800">Brian Halligan</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProfileSidebar;
|
||||
65
src/partials/community/UsersTabsCard.jsx
Normal file
65
src/partials/community/UsersTabsCard.jsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import EditMenu from '../../components/DropdownEditMenu';
|
||||
|
||||
function UsersTabsCard(props) {
|
||||
return (
|
||||
<div className="col-span-full sm:col-span-6 xl:col-span-3 bg-white shadow-lg rounded-sm border border-slate-200">
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Card top */}
|
||||
<div className="grow p-5">
|
||||
{/* Menu button */}
|
||||
<div className="relative">
|
||||
<EditMenu align="right" className="absolute top-0 right-0 inline-flex">
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 1</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 2</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">Remove</Link>
|
||||
</li>
|
||||
</EditMenu>
|
||||
</div>
|
||||
{/* Image + name */}
|
||||
<header>
|
||||
<div className="flex justify-center mb-2">
|
||||
<Link className="relative inline-flex items-start" to={props.link}>
|
||||
<div className="absolute top-0 right-0 -mr-2 bg-white rounded-full shadow" aria-hidden="true">
|
||||
<svg className="w-8 h-8 fill-current text-amber-500" viewBox="0 0 32 32">
|
||||
<path d="M21 14.077a.75.75 0 01-.75-.75 1.5 1.5 0 00-1.5-1.5.75.75 0 110-1.5 1.5 1.5 0 001.5-1.5.75.75 0 111.5 0 1.5 1.5 0 001.5 1.5.75.75 0 010 1.5 1.5 1.5 0 00-1.5 1.5.75.75 0 01-.75.75zM14 24.077a1 1 0 01-1-1 4 4 0 00-4-4 1 1 0 110-2 4 4 0 004-4 1 1 0 012 0 4 4 0 004 4 1 1 0 010 2 4 4 0 00-4 4 1 1 0 01-1 1z" />
|
||||
</svg>
|
||||
</div>
|
||||
<img className="rounded-full" src={props.image} width="64" height="64" alt={props.name} />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<Link className="inline-flex text-slate-800 hover:text-slate-900" to={props.link}>
|
||||
<h2 className="text-xl leading-snug justify-center font-semibold">{props.name}</h2>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex justify-center items-center"><span className="text-sm font-medium text-slate-400 -mt-0.5 mr-1">-></span> <span>{props.location}</span></div>
|
||||
</header>
|
||||
{/* Bio */}
|
||||
<div className="text-center mt-2">
|
||||
<div className="text-sm">{props.content}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Card footer */}
|
||||
<div className="border-t border-slate-200">
|
||||
<Link className="block text-center text-sm text-indigo-500 hover:text-indigo-600 font-medium px-3 py-4" to="/messages">
|
||||
<div className="flex items-center justify-center">
|
||||
<svg className="w-4 h-4 fill-current shrink-0 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
|
||||
</svg>
|
||||
<span>Send Message</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default UsersTabsCard;
|
||||
75
src/partials/community/UsersTilesCard.jsx
Normal file
75
src/partials/community/UsersTilesCard.jsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import EditMenu from '../../components/DropdownEditMenu';
|
||||
|
||||
function UsersTilesCard(props) {
|
||||
return (
|
||||
<div className="col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Card top */}
|
||||
<div className="grow p-5">
|
||||
<div className="flex justify-between items-start">
|
||||
{/* Image + name */}
|
||||
<header>
|
||||
<div className="flex mb-2">
|
||||
<Link className="relative inline-flex items-start mr-5" to={props.link}>
|
||||
<div className="absolute top-0 right-0 -mr-2 bg-white rounded-full shadow" aria-hidden="true">
|
||||
<svg className="w-8 h-8 fill-current text-amber-500" viewBox="0 0 32 32">
|
||||
<path d="M21 14.077a.75.75 0 01-.75-.75 1.5 1.5 0 00-1.5-1.5.75.75 0 110-1.5 1.5 1.5 0 001.5-1.5.75.75 0 111.5 0 1.5 1.5 0 001.5 1.5.75.75 0 010 1.5 1.5 1.5 0 00-1.5 1.5.75.75 0 01-.75.75zM14 24.077a1 1 0 01-1-1 4 4 0 00-4-4 1 1 0 110-2 4 4 0 004-4 1 1 0 012 0 4 4 0 004 4 1 1 0 010 2 4 4 0 00-4 4 1 1 0 01-1 1z" />
|
||||
</svg>
|
||||
</div>
|
||||
<img className="rounded-full" src={props.image} width="64" height="64" alt={props.name} />
|
||||
</Link>
|
||||
<div className="mt-1 pr-1">
|
||||
<Link className="inline-flex text-slate-800 hover:text-slate-900" to={props.link}>
|
||||
<h2 className="text-xl leading-snug justify-center font-semibold">{props.name}</h2>
|
||||
</Link>
|
||||
<div className="flex items-center"><span className="text-sm font-medium text-slate-400 -mt-0.5 mr-1">-></span> <span>{props.location}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{/* Menu button */}
|
||||
<EditMenu align="right" className="relative inline-flex shrink-0">
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 1</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 2</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">Remove</Link>
|
||||
</li>
|
||||
</EditMenu>
|
||||
</div>
|
||||
{/* Bio */}
|
||||
<div className="mt-2">
|
||||
<div className="text-sm">{props.content}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Card footer */}
|
||||
<div className="border-t border-slate-200">
|
||||
<div className="flex divide-x divide-slate-200r">
|
||||
<Link className="block flex-1 text-center text-sm text-indigo-500 hover:text-indigo-600 font-medium px-3 py-4" to="/messages">
|
||||
<div className="flex items-center justify-center">
|
||||
<svg className="w-4 h-4 fill-current shrink-0 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
|
||||
</svg>
|
||||
<span>Send Email</span>
|
||||
</div>
|
||||
</Link>
|
||||
<Link className="block flex-1 text-center text-sm text-slate-600 hover:text-slate-800 font-medium px-3 py-4 group" to="/settings">
|
||||
<div className="flex items-center justify-center">
|
||||
<svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-slate-500 shrink-0 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z" />
|
||||
</svg>
|
||||
<span>Edit Profile</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default UsersTilesCard;
|
||||
Reference in New Issue
Block a user