Facebook create post section fetch an image containing list of icons and using backgroundPosition get required icon from same image in this way facebook does not make extra api request for each icons and reduce some memory consumption.
In this post i have created clone of facebook create post section using tailwindcss and for accessibility perspective ( in modal ) i have used headless ui.
on large screen
on mobile devices
create post modal
You can find code in github repo
tailwind-collectionsthis is an open source repo where i put some amazing clone from different sites using nextjs and tailwindcss github repo
src/pages/facebook/create-post.jsx
import { Dialog } from "@headlessui/react";
import React, { useState } from "react";
import FeatureButton from "../../components/facebook/create-post/FeatureButton";
import Avatar from "../../components/facebook/create-post/Avatar";
export default function CreatePost() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
{/* create post card */}
<div className="min-h-screen grid place-items-center bg-gray-100">
<div className="p-4 md:p-6 shadow-md bg-white rounded-lg">
<div className="flex items-center space-x-4">
<div className="flex-shrink-0">
<Avatar />
</div>
<div
className="w-full px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full cursor-pointer"
onClick={() => setIsOpen(true)}
>
<h3 className="md:text-lg text-gray-500">
Whats on your mind, Harsh ?
</h3>
</div>
</div>
<hr className="mt-3 mb-3" />
<div className="grid grid-cols-3 gap-1">
<FeatureButton text="Live video" imageBgPosition="0px 0px" />
<FeatureButton text="Photo/Video" imageBgPosition="0px -225px" />
<FeatureButton
text="Feeling/Activity"
imageBgPosition="0px -25px"
/>
</div>
</div>
</div>
{/* create post dialog */}
<Dialog
open={isOpen}
onClose={() => setIsOpen(false)}
className="fixed z-10 inset-0 overflow-y-auto"
>
<div className="flex items-center justify-center min-h-screen">
{/* dialog overlay */}
<Dialog.Overlay className="fixed inset-0 bg-black opacity-20" />
{/* dialog card */}
<div className="relative bg-white w-96 rounded-lg">
{/* dialog header */}
<div className="flex justify-center relative border-b">
{/* dialog title */}
<Dialog.Title className=" py-4 text-xl font-bold">
Create Post
</Dialog.Title>
{/* dialog close icon button */}
<div className="absolute right-0 p-2">
<button
className="bg-gray-200 p-2 hover:bg-gray-300 rounded-full text-gray-500"
onClick={() => setIsOpen(false)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
{/* dialog body */}
<Dialog.Description>
{/* post author profile */}
<div className="my-2 px-4 flex items-center space-x-2">
<Avatar />
<div>
<h6 className="font-bold text-sm">Harsh Mangalam</h6>
{/* author friends dropdown */}
<div className="flex items-center space-x-2 bg-gray-300 font-bold px-2 py-1 rounded-lg cursor-pointer">
<img
src="https://static.xx.fbcdn.net/rsrc.php/v3/yJ/r/8jU_V36aE1u.png"
alt="Harsh`s friends"
className="h-3 w-3"
/>
<span className="text-sm">Friends</span>
<i
style={{
backgroundImage: `url("https://static.xx.fbcdn.net/rsrc.php/v3/yu/r/eU_DXmSX2-Q.png")`,
backgroundPosition: "-60px -166px",
backgroundSize: "189px 183px",
}}
className="w-3 h-3 bg-no-repeat inline-block"
></i>
</div>
</div>
</div>
{/* create post interface */}
<div className="px-4 py-2">
<div className="mb-4">
<textarea
className="w-full placeholder-gray-700 text-xl focus:outline-none"
rows="6"
placeholder="What`s on your mind Harsh ?"
/>
</div>
<div className="flex items-center justify-between">
<div>
<img
className="h-9"
src="https://www.facebook.com/images/composer/SATP_Aa_square-2x.png"
alt="image pallete"
/>
</div>
<div>
<span>
<i
className="bg-no-repeat inline-block bg-auto w-6 h-6 "
style={{
backgroundImage: `url("https://static.xx.fbcdn.net/rsrc.php/v3/ys/r/52gJ5vOc-Eq.png")`,
backgroundPosition: "0px -207px",
}}
></i>
</span>
</div>
</div>
</div>
<div className="my-2 px-4">
<button className="text-center w-full py-2 rounded-lg bg-blue-500 text-white" disabled>
Post
</button>
</div>
</Dialog.Description>
</div>
</div>
</Dialog>
</>
);
}
src/components/FeatureButton.jsx
import React from "react";
export default function FeatureButton({ text, imageBgPosition }) {
return (
<button className="px-4 py-2 flex items-center justify-center space-x-2 hover:bg-gray-100 rounded-lg">
<i
style={{
backgroundImage: `url("https://static.xx.fbcdn.net/rsrc.php/v3/yC/r/jrzbj1_5Jys.png")`,
backgroundPosition: imageBgPosition,
}}
className="bg-no-repeat bg-auto w-6 h-6 inline-block"
></i>
<span className="text-gray-600 font-medium hidden md:block">{text}</span>
</button>
);
}
src/components/Avatar.jsx
export default function Avatar() {
return (
<img
src="https://scontent.fdbd1-1.fna.fbcdn.net/v/t39.30808-1/cp0/p40x40/240957222_210823981104142_1718205027675719576_n.jpg?_nc_cat=103&ccb=1-5&_nc_sid=7206a8&_nc_ohc=nvVcfGdrI-sAX9WtbbY&_nc_ht=scontent.fdbd1-1.fna&oh=408bbd40e0ec17941cf3bfe50f414427&oe=6163D8B5"
alt="Harsh mangalam`s profile image"
className="w-10 h-10 rounded-full"
/>
);
}
```
Top comments (0)