Untitled
unknown
jsx
a year ago
5.1 kB
4
Indexable
import React, { useState } from 'react'; const PostCard = ({ userProfilePic, postImage, initialLikes, postDescription }) => { const [likes, setLikes] = useState(0); const [showOptions, setShowOptions] = useState(false); const handleLike = () => { setLikes(currentLikes => currentLikes + 1); }; const handleComment = () => { // Logic to handle comment action }; const handleBookmark = () => { // Logic to handle bookmark action }; const toggleOptions = () => { setShowOptions(!showOptions); }; return ( <div className="container mx-auto px-20"> <div className="min-h-48 flex items-center justify-center p-20 px-6"> <div className="bg-coolGray-900 text-coolGray-100 rounded-md shadow-md sm:w-96"> <div className="flex items-center justify-between p-3"> <div className="flex items-center space-x-2"> <img src="https://media.gq.com.mx/photos/5fd51c587938a266e30f81d1/16:9/w_1920,c_limit/Deadpool.jpg" alt="" className="bg-coolGray-500 border-coolGray-700 h-8 w-8 rounded-full object-cover object-center shadow-sm" /> <div className="-space-y-1"> <h2 className="text-sm font-semibold leading-none">nameUser</h2> </div> </div> <button onClick={toggleOptions} title="Open options" type="button"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" /> </svg> </button> {showOptions && ( <div className="absolute bg-white rounded shadow-md ml-64"> <ul> <li className="px-4 py-2 hover:bg-gray-100 cursor-pointer">Edit</li> <li className="px-4 py-2 hover:bg-gray-100 cursor-pointer">Delete</li> </ul> </div> )} </div> <img src="https://i.pinimg.com/564x/1c/02/67/1c02674dcd5747a0258694d69ab84572.jpg" alt="" className="bg-coolGray-500 h-70 w-full object-cover object-center" /> <div className="p-3"> <div className="flex items-center justify-between"> <div className="flex items-center space-x-3"> <button onClick={handleLike} title="Like post" className="flex items-center justify-center"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="h-5 w-5 fill-current"> <path d="M453.122,79.012a128,128,0,0,0-181.087.068l-15.511,15.7L241.142,79.114l-.1-.1a128,128,0,0,0-181.02,0l-6.91,6.91a128,128,0,0,0,0,181.019L235.485,449.314l20.595,21.578.491-.492.533.533L276.4,450.574,460.032,266.94a128.147,128.147,0,0,0,0-181.019ZM437.4,244.313,256.571,425.146,75.738,244.313a96,96,0,0,1,0-135.764l6.911-6.91a96,96,0,0,1,135.713-.051l38.093,38.787,38.274-38.736a96,96,0,0,1,135.765,0l6.91,6.909A96.11,96.11,0,0,1,437.4,244.313Z"></path> </svg> </button> <button onClick={handleComment} title="Add a comment" className="flex items-center justify-center"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="h-5 w-5 fill-current"> <path d="M496,496H480a273.39,273.39,0,0,1-179.025-66.782l-16.827-14.584C274.814,415.542,265.376,416,256,416c-63.527,0-123.385-20.431-168.548-57.529C41.375,320.623,16,270.025,16,216S41.375,111.377,87.452,73.529C132.615,36.431,192.473,16,256,16S379.385,36.431,424.548,73.529C470.625,111.377,496,161.975,496,216a171.161,171.161,0,0,1-21.077,82.151,201.505,201.505,0,0,1-47.065,57.537,285.22,285.22,0,0,0,63.455,97L496,457.373ZM294.456,381.222l27.477,23.814a241.379,241.379,0,0,0,135,57.86,317.5,317.5,0,0,1-62.617-105.583v0l-4.395-12.463,9.209-7.068C440.963,305.678,464,262.429,464,216c0-92.636-93.309-168-208-168S48,123.364,48,216s93.309,168,208,168a259.114,259.114,0,0,0,31.4-1.913Z"></path> </svg> </button> </div> <button onClick={handleBookmark} title="Bookmark post" className="flex items-center justify-center"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="h-5 w-5 fill-current"> <path d="M424,496H388.75L256.008,381.19,123.467,496H88V16H424ZM120,48V456.667l135.992-117.8L392,456.5V48Z"></path> </svg> </button> </div> <div className="flex flex-wrap items-center pb-1 pt-3"> <div className="flex items-center space-x-2"> <div className="ml-2 text-sm font-semibold">{likes} Me gusta </div> </div> </div> <div className="mt-2 text-sm font-semibold">{postDescription}</div> </div> </div> </div> </div> ); }; export default PostCard;
Editor is loading...
Leave a Comment