46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
"use client";
|
|
|
|
import { StoriesModal } from "@/components/modals/StoriesModal";
|
|
import { StoryFormModal } from "@/components/modals/StoryFormModal";
|
|
import { OpenFormModalWrapper } from "@/hocs/OpenFormModalWrapper";
|
|
import { useGetStories } from "@/queries/getStories";
|
|
import { useModalStore } from "@/stores/useModalStore";
|
|
import AddIcon from "../components/icons/AddIcon";
|
|
import { GradientButton } from "./GradientButton";
|
|
|
|
export function StoriesButton() {
|
|
const { setModal } = useModalStore();
|
|
|
|
const { data: stories } = useGetStories();
|
|
|
|
return (
|
|
<div className="flex items-center mx-auto">
|
|
<div className="flex items-center">
|
|
{stories?.slice(0, 3).map(({ id, text, preview }, index) => (
|
|
<button
|
|
onClick={() => setModal(<StoriesModal startIndex={index} />)}
|
|
className="aspect-square first:translate-x-2 last:-translate-x-2 w-full rounded-full cursor-pointer outline-none"
|
|
key={id}
|
|
>
|
|
<div className="lg:p-[0.069vw] p-px bg-gradient-saturated rounded-full relative aspect-square">
|
|
<img
|
|
src={process.env.NEXT_PUBLIC_S3_BUCKET + preview}
|
|
alt={text}
|
|
className="rounded-full object-cover object-center aspect-square lg:border-[0.139vw] border-[2px] border-[#0F1011] !relative lg:w-[3.611vw] w-[52px]"
|
|
/>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
<OpenFormModalWrapper modal={<StoryFormModal action={"create"} />}>
|
|
<GradientButton>
|
|
<div className="text-white lg:size-[1.111vw] size-4">
|
|
<AddIcon />
|
|
</div>
|
|
</GradientButton>
|
|
</OpenFormModalWrapper>
|
|
</div>
|
|
);
|
|
}
|