fix: content-management
This commit is contained in:
parent
50ca7cfc59
commit
5fc867dd12
|
|
@ -278,12 +278,13 @@ const Galery = (props: any) => {
|
|||
<HeaderManagement />
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
<SidebarManagement />
|
||||
<div className="w-full lg:w-2/3 p-8 lg:p-12">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold mb-3">Galeri Saya</h1>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="w-full lg:w-2/3 p-8 lg:p-0 mt-12">
|
||||
<div className="flex flex-col mt-4">
|
||||
<div className="mx-auto w-full max-w-7xl justify-start flex flex-col lg:flex-row gap-5 mb-4">
|
||||
<h1 className="text-2xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-center text-white">
|
||||
<span className="text-black">Galeri </span>
|
||||
Saya
|
||||
</h1>
|
||||
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
|
||||
<TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
|
||||
<TabsTrigger
|
||||
|
|
@ -316,60 +317,66 @@ const Galery = (props: any) => {
|
|||
</TabsList>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
{selectedTab == "video" ? (
|
||||
contentVideo?.length > 0 ? (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{contentVideo?.map((video: any) => (
|
||||
<Card key={video?.id}>
|
||||
<CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0">
|
||||
<Card key={video?.id} className="hover:scale-105 transition-transform duration-300">
|
||||
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
|
||||
<div>
|
||||
<Link href={`/video/detail/${video?.mediaUpload?.slug}`}>
|
||||
{/* <img src={video?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg " /> */}
|
||||
<div className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg">
|
||||
<ImageBlurry src={video?.mediaUpload?.thumbnailLink} alt={video?.mediaUpload?.title} style={{ objectFit: "contain", width: "100%", height: "100%" }} />
|
||||
</div>
|
||||
</Link>
|
||||
<div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{video?.mediaUpload?.title}</div>
|
||||
<Popover>
|
||||
<PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
|
||||
<a className="flex justify-end items-end place-items-end">
|
||||
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
|
||||
</a>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-52">
|
||||
<Link href={`/content-management/rewrite/create/${video?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
|
||||
<Icon icon="jam:write" fontSize={25} />
|
||||
<p className="text-base font-semibold mb-2">Content Rewrite</p>
|
||||
</Link>
|
||||
<div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button className="w-full flex items-center gap-3">
|
||||
<Icon icon="oi:share" fontSize={20} />
|
||||
<p className="text-base font-semibold mb-3">Bagikan</p>
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="mb-2">Share Ke Email</h1>
|
||||
<div className="flex flex-col mb-2">
|
||||
<p className="text-base font-semibold mb-1">Email Tujuan :</p>
|
||||
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
|
||||
<div className="relative group overflow-hidden shadow-md hover:shadow-lg">
|
||||
<div className="relative h-60 rounded-lg overflow-hidden">
|
||||
<ImageBlurry src={video?.mediaUpload?.thumbnailLink} alt={video?.mediaUpload?.title} style={{ objectFit: "cover", width: "100%", height: "100%" }} />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-transparent via-gray-900/80 to-transparent text-white">
|
||||
<Link href={`/video/detail/${video?.mediaUpload?.slug}`}>
|
||||
<p className="text-sm p-2 lg:text-base font-semibold truncate">{video?.mediaUpload?.title}</p>
|
||||
</Link>
|
||||
<p className="flex text-[10px] ml-1 mb-2 items-end">
|
||||
<Popover>
|
||||
<PopoverTrigger className="flex cursor-pointer" asChild>
|
||||
<a className="flex justify-end items-end place-items-end">
|
||||
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
|
||||
</a>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-52">
|
||||
<div onClick={() => handleSaveWishlist(video?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
|
||||
<Icon icon="material-symbols:bookmark-outline" fontSize={25} />
|
||||
<p className="text-base font-semibold mb-2">Simpan</p>
|
||||
</div>
|
||||
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
|
||||
Kirim
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<Link href={`/content-management/rewrite/create/${video?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
|
||||
<Icon icon="jam:write" fontSize={25} />
|
||||
<p className="text-base font-semibold mb-2">Content Rewrite</p>
|
||||
</Link>
|
||||
<div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button className="w-full flex flex-row items-center gap-3">
|
||||
<Icon icon="oi:share" fontSize={20} />
|
||||
<p className="text-base font-semibold mb-1">Bagikan</p>
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="mb-2">Share Ke Email</h1>
|
||||
<div className="flex flex-col mb-2">
|
||||
<p className="text-base font-semibold mb-1">Email Tujuan :</p>
|
||||
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
|
||||
</div>
|
||||
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
|
||||
Kirim
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</p>
|
||||
</div>
|
||||
<a onClick={() => handleDelete(video?.id)} className="flex items-center gap-3 hover:text-red-800 w-full rounded-lg">
|
||||
<Icon icon="fa:trash" fontSize={20} />
|
||||
<p className="text-base font-semibold">Hapus</p>
|
||||
</a>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
@ -464,58 +471,65 @@ const Galery = (props: any) => {
|
|||
contentImage?.length > 0 ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{contentImage?.map((image: any) => (
|
||||
<Card key={image?.id}>
|
||||
<CardContent className="flex flex-col bg-black dark:bg-white w-full h-full rounded-lg p-0">
|
||||
<Link href={`/image/detail/${image?.mediaUpload?.slug}`}>
|
||||
{/* <img src={image?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> */}
|
||||
<div className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg">
|
||||
<ImageBlurry src={image?.mediaUpload?.thumbnailLink} alt={image?.mediaUpload?.title} style={{ objectFit: "contain", width: "100%", height: "100%" }} />
|
||||
</div>
|
||||
</Link>
|
||||
<div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{image?.mediaUpload?.title}</div>
|
||||
<Popover>
|
||||
<PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
|
||||
<a className="flex justify-end items-end place-items-end">
|
||||
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
|
||||
</a>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-52">
|
||||
<Link href={`/content-management/rewrite/create/${image?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
|
||||
<Icon icon="jam:write" fontSize={25} />
|
||||
<p className="text-base font-semibold mb-2">Content Rewrite</p>
|
||||
</Link>
|
||||
<div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button className="w-full flex items-center gap-3">
|
||||
<Icon icon="oi:share" fontSize={20} />
|
||||
<p className="text-base font-semibold mb-3">Bagikan</p>
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="mb-2">Share Ke Email</h1>
|
||||
<div className="flex flex-col mb-2">
|
||||
<p className="text-base font-semibold mb-1">Email Tujuan :</p>
|
||||
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
|
||||
</div>
|
||||
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
|
||||
Kirim
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<Card key={image?.id} className="hover:scale-105 transition-transform duration-300">
|
||||
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
|
||||
<div>
|
||||
<div className="relative group overflow-hidden shadow-md hover:shadow-lg">
|
||||
<div className="relative h-60 rounded-lg overflow-hidden">
|
||||
<ImageBlurry src={image?.mediaUpload?.thumbnailLink} alt={image?.mediaUpload?.title} style={{ objectFit: "cover", width: "100%", height: "100%" }} />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-transparent via-gray-900/80 to-transparent text-white">
|
||||
<Link href={`/video/detail/${image?.mediaUpload?.slug}`}>
|
||||
<p className="text-sm p-2 lg:text-base font-semibold truncate">{image?.mediaUpload?.title}</p>
|
||||
</Link>
|
||||
<p className="flex text-[10px] ml-1 mb-2 items-end">
|
||||
<Popover>
|
||||
<PopoverTrigger className="flex cursor-pointer" asChild>
|
||||
<a className="flex justify-end items-end place-items-end">
|
||||
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
|
||||
</a>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-52">
|
||||
<div onClick={() => handleSaveWishlist(image?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
|
||||
<Icon icon="material-symbols:bookmark-outline" fontSize={25} />
|
||||
<p className="text-base font-semibold mb-2">Simpan</p>
|
||||
</div>
|
||||
<Link href={`/content-management/rewrite/create/${image?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
|
||||
<Icon icon="jam:write" fontSize={25} />
|
||||
<p className="text-base font-semibold mb-2">Content Rewrite</p>
|
||||
</Link>
|
||||
<div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button className="w-full flex flex-row items-center gap-3">
|
||||
<Icon icon="oi:share" fontSize={20} />
|
||||
<p className="text-base font-semibold mb-1">Bagikan</p>
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="mb-2">Share Ke Email</h1>
|
||||
<div className="flex flex-col mb-2">
|
||||
<p className="text-base font-semibold mb-1">Email Tujuan :</p>
|
||||
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
|
||||
</div>
|
||||
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
|
||||
Kirim
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<a onClick={() => handleDelete(image?.id)} className="flex items-center gap-3 hover:text-red-800 w-full rounded-lg">
|
||||
<Icon icon="fa:trash" fontSize={20} />
|
||||
<p className="text-base font-semibold">Hapus</p>
|
||||
</a>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="flex items-center justify-center">
|
||||
<Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import { Button } from "@/components/ui/button";
|
|||
import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
|
||||
import ImageBlurry from "@/components/ui/image-blurry";
|
||||
import Image from "next/image";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
|
||||
const Galery = (props: any) => {
|
||||
const [profile, setProfile] = useState<any>();
|
||||
|
|
@ -284,12 +285,13 @@ const Galery = (props: any) => {
|
|||
<HeaderManagement />
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
<SidebarManagement />
|
||||
<div className="w-full lg:w-2/3 p-8 lg:p-12">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">Galeri {profile?.institute?.name}</h1>
|
||||
</div>
|
||||
<div className="w-full lg:w-2/3 p-8 lg:p-0 mt-12">
|
||||
<div className="flex flex-col mt-4">
|
||||
<div className="mx-auto w-full max-w-7xl justify-start flex flex-col lg:flex-row gap-5 mb-4">
|
||||
<h1 className="text-2xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-center text-white">
|
||||
<span className="text-black">Galeri </span>
|
||||
{profile?.institute?.name}
|
||||
</h1>
|
||||
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
|
||||
<TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
|
||||
<TabsTrigger
|
||||
|
|
@ -322,60 +324,66 @@ const Galery = (props: any) => {
|
|||
</TabsList>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<div className="px-2">
|
||||
{selectedTab == "video" ? (
|
||||
contentVideo?.length > 0 ? (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{contentVideo?.map((video: any) => (
|
||||
<Card key={video?.id}>
|
||||
<CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0">
|
||||
<Card key={video?.id} className="hover:scale-105 transition-transform duration-300">
|
||||
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
|
||||
<div>
|
||||
<Link href={`/video/detail/${video?.mediaUpload?.slug}`}>
|
||||
{/* <img src={video?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> */}
|
||||
<div className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg">
|
||||
<ImageBlurry src={video?.mediaUpload?.thumbnailLink} alt={video?.mediaUpload?.title} style={{ objectFit: "contain", width: "100%", height: "100%" }} />
|
||||
</div>
|
||||
</Link>
|
||||
<div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{video?.mediaUpload?.title}</div>
|
||||
<Popover>
|
||||
<PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
|
||||
<a className="flex justify-end items-end place-items-end">
|
||||
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
|
||||
</a>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-52">
|
||||
<div onClick={() => handleSaveWishlist(video?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
|
||||
<Icon icon="material-symbols:bookmark-outline" fontSize={25} />
|
||||
<p className="text-base font-semibold mb-2">Simpan</p>
|
||||
</div>
|
||||
<Link href={`/content-management/rewrite/create/${video?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
|
||||
<Icon icon="jam:write" fontSize={25} />
|
||||
<p className="text-base font-semibold mb-2">Content Rewrite</p>
|
||||
</Link>
|
||||
<div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button className="w-full flex flex-row items-center gap-3">
|
||||
<Icon icon="oi:share" fontSize={20} />
|
||||
<p className="text-base font-semibold mb-1">Bagikan</p>
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="mb-2">Share Ke Email</h1>
|
||||
<div className="flex flex-col mb-2">
|
||||
<p className="text-base font-semibold mb-1">Email Tujuan :</p>
|
||||
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
|
||||
<div className="relative group overflow-hidden shadow-md hover:shadow-lg">
|
||||
<div className="relative h-60 rounded-lg overflow-hidden">
|
||||
<ImageBlurry src={video?.mediaUpload?.thumbnailLink} alt={video?.mediaUpload?.title} style={{ objectFit: "cover", width: "100%", height: "100%" }} />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-transparent via-gray-900/80 to-transparent text-white">
|
||||
<Link href={`/video/detail/${video?.mediaUpload?.slug}`}>
|
||||
<p className="text-sm p-2 lg:text-base font-semibold truncate">{video?.mediaUpload?.title}</p>
|
||||
</Link>
|
||||
<p className="flex text-[10px] ml-1 mb-2 items-end">
|
||||
<Popover>
|
||||
<PopoverTrigger className="flex cursor-pointer" asChild>
|
||||
<a className="flex justify-end items-end place-items-end">
|
||||
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
|
||||
</a>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-52">
|
||||
<div onClick={() => handleSaveWishlist(video?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
|
||||
<Icon icon="material-symbols:bookmark-outline" fontSize={25} />
|
||||
<p className="text-base font-semibold mb-2">Simpan</p>
|
||||
</div>
|
||||
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
|
||||
Kirim
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<Link href={`/content-management/rewrite/create/${video?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
|
||||
<Icon icon="jam:write" fontSize={25} />
|
||||
<p className="text-base font-semibold mb-2">Content Rewrite</p>
|
||||
</Link>
|
||||
<div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button className="w-full flex flex-row items-center gap-3">
|
||||
<Icon icon="oi:share" fontSize={20} />
|
||||
<p className="text-base font-semibold mb-1">Bagikan</p>
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="mb-2">Share Ke Email</h1>
|
||||
<div className="flex flex-col mb-2">
|
||||
<p className="text-base font-semibold mb-1">Email Tujuan :</p>
|
||||
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
|
||||
</div>
|
||||
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
|
||||
Kirim
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</p>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
@ -468,54 +476,61 @@ const Galery = (props: any) => {
|
|||
contentImage?.length > 0 ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{contentImage?.map((image: any) => (
|
||||
<Card key={image?.id}>
|
||||
<CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0">
|
||||
<Link href={`/image/detail/${image?.mediaUpload?.slug}`}>
|
||||
{/* <img src={image?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> */}
|
||||
<div className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg">
|
||||
<ImageBlurry src={image?.mediaUpload?.thumbnailLink} alt={image?.mediaUpload?.title} style={{ objectFit: "contain", width: "100%", height: "100%" }} />
|
||||
<Card key={image?.id} className="hover:scale-105 transition-transform duration-300">
|
||||
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
|
||||
<div>
|
||||
<div className="relative group overflow-hidden shadow-md hover:shadow-lg">
|
||||
<div className="relative h-60 rounded-lg overflow-hidden">
|
||||
<ImageBlurry src={image?.mediaUpload?.thumbnailLink} alt={image?.mediaUpload?.title} style={{ objectFit: "cover", width: "100%", height: "100%" }} />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-transparent via-gray-900/80 to-transparent text-white">
|
||||
<Link href={`/video/detail/${image?.mediaUpload?.slug}`}>
|
||||
<p className="text-sm p-2 lg:text-base font-semibold truncate">{image?.mediaUpload?.title}</p>
|
||||
</Link>
|
||||
<p className="flex text-[10px] ml-1 mb-2 items-end">
|
||||
<Popover>
|
||||
<PopoverTrigger className="flex cursor-pointer" asChild>
|
||||
<a className="flex justify-end items-end place-items-end">
|
||||
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
|
||||
</a>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-52">
|
||||
<div onClick={() => handleSaveWishlist(image?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
|
||||
<Icon icon="material-symbols:bookmark-outline" fontSize={25} />
|
||||
<p className="text-base font-semibold mb-2">Simpan</p>
|
||||
</div>
|
||||
<Link href={`/content-management/rewrite/create/${image?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
|
||||
<Icon icon="jam:write" fontSize={25} />
|
||||
<p className="text-base font-semibold mb-2">Content Rewrite</p>
|
||||
</Link>
|
||||
<div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button className="w-full flex flex-row items-center gap-3">
|
||||
<Icon icon="oi:share" fontSize={20} />
|
||||
<p className="text-base font-semibold mb-1">Bagikan</p>
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="mb-2">Share Ke Email</h1>
|
||||
<div className="flex flex-col mb-2">
|
||||
<p className="text-base font-semibold mb-1">Email Tujuan :</p>
|
||||
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
|
||||
</div>
|
||||
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
|
||||
Kirim
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{image?.mediaUpload?.title}</div>
|
||||
<Popover>
|
||||
<PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
|
||||
<a className="flex justify-end items-end place-items-end">
|
||||
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
|
||||
</a>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-52">
|
||||
<div onClick={() => handleSaveWishlist(image?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
|
||||
<Icon icon="material-symbols:bookmark-outline" fontSize={25} />
|
||||
<p className="text-base font-semibold mb-2">Simpan</p>
|
||||
</div>
|
||||
<Link href={`/content-management/rewrite/create/${image?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
|
||||
<Icon icon="jam:write" fontSize={25} />
|
||||
<p className="text-base font-semibold mb-2">Content Rewrite</p>
|
||||
</Link>
|
||||
<div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button className="w-full flex items-center gap-2">
|
||||
<Icon icon="oi:share" fontSize={20} />
|
||||
<p className="text-base font-semibold mb-2">Bagikan</p>
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="mb-2">Share Ke Email</h1>
|
||||
<div className="flex flex-col mb-2">
|
||||
<p className="text-base font-semibold mb-1">Email Tujuan :</p>
|
||||
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
|
||||
</div>
|
||||
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
|
||||
Kirim
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -200,10 +200,10 @@ const page = () => {
|
|||
<HeaderManagement />
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
<SidebarManagement />
|
||||
<div className="w-full lg:w-2/3 p-8 lg:p-12">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold mb-4">Galeri Content Rewrite</h1>
|
||||
</div>
|
||||
<div className="w-full lg:w-2/3 p-8 lg:p-14">
|
||||
<h1 className="text-2xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-center text-white mb-4">
|
||||
<span className="text-black">Galeri </span>Content Rewrite
|
||||
</h1>
|
||||
<div className="">
|
||||
{contentImage?.length > 0 ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import { Button } from "@/components/ui/button";
|
|||
import toast from "react-hot-toast";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { ToastAction } from "@/components/ui/toast";
|
||||
import Image from "next/image";
|
||||
|
||||
const page = () => {
|
||||
const [user, setUser] = useState<any>();
|
||||
|
|
@ -118,25 +119,22 @@ const page = () => {
|
|||
<SidebarManagement />
|
||||
<div className="w-2/3 p-12">
|
||||
<div className="flex flex-col">
|
||||
<p className="text-lg font-semibold">Tim {profile?.institute?.name}</p>
|
||||
<p className="text-base mb-3">{user?.length} Anggota</p>
|
||||
<p className="text-2xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-center text-white my-4 ">
|
||||
<span className="text-black">Tim </span>
|
||||
{profile?.institute?.name}
|
||||
</p>
|
||||
<p className="text-base mb-3">
|
||||
{user?.length} Anggota Tim {profile?.institute?.name}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-row gap-5">
|
||||
{user?.map((row: any) => (
|
||||
<div key={row?.id}>
|
||||
<Dialog>
|
||||
<DialogTrigger>
|
||||
<div className="flex flex-col items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="5em" height="5em" viewBox="0 0 16 16">
|
||||
<path fill="currentColor" d="M11 7c0 1.66-1.34 3-3 3S5 8.66 5 7s1.34-3 3-3s3 1.34 3 3" />
|
||||
<path
|
||||
fill="black"
|
||||
fill-rule="evenodd"
|
||||
d="M16 8c0 4.42-3.58 8-8 8s-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8M4 13.75C4.16 13.484 5.71 11 7.99 11c2.27 0 3.83 2.49 3.99 2.75A6.98 6.98 0 0 0 14.99 8c0-3.87-3.13-7-7-7s-7 3.13-7 7c0 2.38 1.19 4.49 3.01 5.75"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<p className="font-semibold text-md">{row?.fullname}</p>
|
||||
<div className="flex flex-col items-center border border-gray-500 p-2 bg-[#f8f8f8] rounded-md">
|
||||
<Image src="/assets/gg-profile.png" alt="" width={1280} height={720} className="h-10 w-10 mb-4" />
|
||||
<p className="font-bold text-base ">{row?.fullname}</p>
|
||||
<p className="text-sm font-light">{row?.username || "username"}</p>
|
||||
</div>
|
||||
</DialogTrigger>
|
||||
|
|
|
|||
|
|
@ -67,14 +67,14 @@ const HeaderManagement = () => {
|
|||
return (
|
||||
<div>
|
||||
{/* Header */}
|
||||
<div className="bg-[#504e52] p-10 lg:p-12">
|
||||
<div className="bg-[#cccccc] p-5 lg:p-8">
|
||||
<div className="flex flex-col lg:flex-row justify-center lg:justify-between mx-6 lg:mx-10">
|
||||
<div className="flex items-center gap-2 ">
|
||||
<img src="/assets/avatar-profile.png" alt="avatar" className="w-14 h-14" />
|
||||
<img src="/assets/gg-profile.png" alt="avatar" className="w-14 h-14" />
|
||||
<div className="flex flex-col mx-2">
|
||||
<p className="text-white text-sm font-semibold">{profile?.fullname}</p>
|
||||
<p className="text-white text-sm font-light">{profile?.username}</p>
|
||||
<p className="text-white text-sm font-light">
|
||||
<p className="text-black text-sm font-semibold">{profile?.fullname}</p>
|
||||
<p className="text-black text-sm font-light">{profile?.username}</p>
|
||||
<p className="text-black text-sm font-light">
|
||||
Aktif Sejak
|
||||
{`${new Date(profile?.createdAt).getDate()}/${new Date(profile?.createdAt).getMonth() + 1}/${new Date(profile?.createdAt).getFullYear()} ${new Date(profile?.createdAt).getHours()}:${new Date(
|
||||
profile?.createdAt
|
||||
|
|
@ -82,9 +82,9 @@ const HeaderManagement = () => {
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/profile" className="flex justify-center items-center text-white gap-2 mt-3 lg:mt-0">
|
||||
<Icon icon="tdesign:setting-1-filled" />
|
||||
<p className="text-sm lg:text-base">Pengaturan</p>
|
||||
<Link href="/profile" className="flex justify-center items-center text-black gap-2 mt-3 lg:mt-0">
|
||||
<p className="text-sm lg:text-base">Lihat Profil Lengkap</p>
|
||||
<Icon icon="ri:arrow-right-s-line" className="h-5 w-5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 812 B |
Loading…
Reference in New Issue