Develop

crazystacknextjs/next.config.ts

@@ -7,6 +7,11 @@ const nextConfig: NextConfig = {
         protocol: "https",
         hostname: "images.unsplash.com",
       },
+      {
+        protocol: "https",
+        hostname:
+          "crazystack.571527a8590aad1eb25dc5b3338c4271.r2.cloudflarestorage.com",
+      },
     ],
   },
 };

crazystacknextjs/package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
     "@hookform/resolvers": "^3.9.1",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.2",
@@ -26,16 +28,21 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.1.3",
+    "@react-input/mask": "^1.2.15",
     "@tanstack/react-query": "^5.59.16",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "emoji-mart": "^5.6.0",
+    "framer-motion": "^12.0.11",
     "i18next": "^23.16.4",
     "i18next-chained-backend": "^4.6.2",
     "i18next-http-backend": "^2.6.2",
     "i18next-resources-to-backend": "^1.2.1",
+    "libphonenumber-js": "^1.11.15",
     "lucide-react": "^0.454.0",
     "next": "15.0.2",
     "next-themes": "^0.3.0",

crazystacknextjs/src/app/(auth)/_components/terms-and-conditions.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+
+export const TermsAndConditions = () => {
+  return (
+    <p className="mt-4 px-8 text-center text-sm text-muted-foreground">
+      Clicando em continuar, você concorda com nossos{" "}
+      <Link
+        href="/terms"
+        className="underline underline-offset-4 hover:text-primary"
+      >
+        Termos de serviço
+      </Link>{" "}
+      e{" "}
+      <Link
+        href="/terms"
+        className="underline underline-offset-4 hover:text-primary"
+      >
+        Política de privacidade
+      </Link>
+    </p>
+  );
+};

crazystacknextjs/src/app/login/_components/signin-div.tsx → crazystacknextjs/src/app/(auth)/login/_components/signin-div.tsx

@@ -1,5 +1,6 @@
 import { LoginForm } from "@/slices/general/features/login";
 import Link from "next/link";
+import { TermsAndConditions } from "../../_components/terms-and-conditions";
 
 export const SignInDiv = () => {
   return (
@@ -18,22 +19,7 @@ export const SignInDiv = () => {
         </div>
       </div>
       <LoginForm />
-      <p className="mt-4 px-8 text-center text-sm text-muted-foreground">
-        Clicando em continuar, você concorda com nossos{" "}
-        <Link
-          href="/terms"
-          className="underline underline-offset-4 hover:text-primary"
-        >
-          Termos de serviço
-        </Link>{" "}
-        e{" "}
-        <Link
-          href="/terms"
-          className="underline underline-offset-4 hover:text-primary"
-        >
-          Política de privacidade
-        </Link>
-      </p>
+      <TermsAndConditions />
       <p className="mt-4 text-center text-sm text-muted-foreground">
         Ainda não tem uma conta?{" "}
         <Link

crazystacknextjs/src/app/login/page.tsx → crazystacknextjs/src/app/(auth)/login/page.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { whitelabel } from "@/application/whitelabel";
-import { SideDiv } from "./_components/side-div";
 import { SignInDiv } from "./_components/signin-div";
+import { SideDiv } from "../_components/side-div";
 
 export const metadata: Metadata = {
   title: `${whitelabel.systemName} | Entrar`,

crazystacknextjs/src/app/(auth)/signup/_components/signup-div.tsx

@@ -0,0 +1,34 @@
+import { SignUpForm } from "@/slices/general/features/signup";
+import Link from "next/link";
+import { TermsAndConditions } from "../../_components/terms-and-conditions";
+
+export const SignUpDiv = () => {
+  return (
+    <div className="mt-8 lg:mt-0 p-8">
+      <div
+        className="mx-auto flex w-full flex-col justify-center
+       space-y-6 sm:w-[350px]"
+      >
+        <div className="flex flex-col space-y-2 text-center mb-4">
+          <h1 className="text-2xl font-semibold tracking-tight font-inter">
+            Criar conta
+          </h1>
+          <p className="text-sm text-muted-foreground font-inter">
+            Digite seu email e senha para criar sua conta
+          </p>
+        </div>
+      </div>
+      <SignUpForm />
+      <TermsAndConditions />
+      <p className="mt-4 text-center text-sm text-muted-foreground">
+        Já tem uma conta?{" "}
+        <Link
+          href="/signup"
+          className="font-semibold text-primary hover:underline"
+        >
+          Entre aqui
+        </Link>
+      </p>
+    </div>
+  );
+};

crazystacknextjs/src/app/(auth)/signup/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { whitelabel } from "@/application/whitelabel";
+import { SignUpDiv } from "./_components/signup-div";
+import { SideDiv } from "../_components/side-div";
+
+export const metadata: Metadata = {
+  title: `${whitelabel.systemName} | Entrar`,
+  description: `Página de login do ${whitelabel.systemName}. Faça login para acessar o sistema.`,
+};
+export default function Login() {
+  return (
+    <div
+      className="container relative h-[800px] flex-col items-center justify-center
+    md:grid lg:max-w-none lg:grid-cols-2 lg:px-0
+    "
+    >
+      <SideDiv />
+      <SignUpDiv />
+    </div>
+  );
+}

crazystacknextjs/src/app/(pageswithheader)/(home)/_components/molecules/emoji-picker.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import data from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
+
+interface EmojiPickerProps {
+  onEmojiSelect: (emoji: string) => void;
+}
+
+const EmojiPicker: React.FC<EmojiPickerProps> = ({ onEmojiSelect }) => {
+  return (
+    <Picker
+      data={data}
+      onEmojiSelect={(emoji: any) => onEmojiSelect(emoji.native)}
+      theme="light"
+      showPreview={false}
+      showSkinTones={false}
+      emojiSize={20}
+      emojiButtonSize={28}
+      maxFrequentRows={4}
+    />
+  );
+};
+
+export default EmojiPicker;

crazystacknextjs/src/app/(pageswithheader)/(home)/_components/molecules/tweet-card.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import { Heart, MessageCircle, Repeat2 } from "lucide-react";
+import { TweetForm } from "./tweet-form";
+import { toggleLike } from "@/slices/belezix/entidades/tweet/tweet.api";
+import { useAuth } from "@/shared/libs/contexts/AuthContext";
+import { parseCookies } from "nookies";
+import { useToast } from "@/hooks/use-toast";
+
+export const TweetCard = ({
+  tweet,
+  canReply = false,
+  handleChangeCanReply,
+  ref,
+}: any) => {
+  const { user } = useAuth();
+  const { toast } = useToast();
+  const isReply = !!tweet?.tweetId;
+  const [likeCount, setLikeCount] = useState(
+    Number(tweet?.tweetlike?.total ?? 0),
+  );
+  const [isLiked, setIsLiked] = useState(
+    tweet?.tweetlike?.find?.((item: any) => item?.createdById === user?._id),
+  );
+  const [isLikeLoading, setIsLikeLoading] = useState(false);
+
+  useEffect(() => {
+    setLikeCount(Number(tweet?.tweetlike?.total ?? 0));
+    setIsLiked(
+      tweet?.tweetlike?.find?.((item: any) => item?.createdById === user?._id),
+    );
+  }, [tweet, user]);
+
+  const handleLikeClick = useCallback(async () => {
+    if (!user) {
+      toast({
+        title: "Authentication required",
+        description: "Please log in to like tweets.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsLikeLoading(true);
+    try {
+      await toggleLike({
+        tweetlike: { tweetId: tweet?._id, userSlug: user?.slug },
+        cookies: parseCookies(),
+      });
+      setLikeCount((prev: any) => (isLiked ? prev - 1 : prev + 1));
+      setIsLiked(!isLiked);
+    } catch (error) {
+      console.error("Error toggling like:", error);
+      toast({
+        title: "Error",
+        description: "Failed to update like status. Please try again.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLikeLoading(false);
+    }
+  }, [isLiked, tweet?._id, user, toast]);
+
+  return (
+    <Card className="w-full" ref={ref}>
+      <CardHeader className="flex flex-row items-center space-x-4 pb-2">
+        <Avatar className="w-12 h-12">
+          <AvatarImage
+            src={tweet?.createdBy?.photo}
+            alt={tweet?.createdBy?.name}
+          />
+          <AvatarFallback>{tweet?.createdBy?.slug?.charAt?.(0)}</AvatarFallback>
+        </Avatar>
+        <div className="flex-1">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="font-bold text-lg">@{tweet?.createdBy?.slug}</h3>
+              <p className="text-sm text-gray-500">{tweet?.createdBy?.name}</p>
+            </div>
+            <p className="text-sm text-gray-500">{tweet?.distanceNow}</p>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <p
+          className="mb-4 text-lg leading-relaxed line-clamp-6"
+          style={{ wordBreak: "break-word" }}
+        >
+          {tweet?.body}
+        </p>
+        {tweet?.image && (
+          <img
+            src={tweet?.image || "/placeholder.svg"}
+            alt="Tweet image"
+            className="w-full rounded-lg mb-4 object-cover h-64"
+          />
+        )}
+      </CardContent>
+      <CardFooter>
+        <div className="flex justify-between w-full">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex items-center space-x-2 text-gray-500 hover:text-blue-500 transition-colors"
+            onClick={() => {
+              if (!user) {
+                toast({
+                  title: "Authentication required",
+                  description: "Please log in to reply tweets.",
+                  variant: "destructive",
+                });
+                return;
+              }
+              handleChangeCanReply({ tweet });
+            }}
+          >
+            <MessageCircle className="w-5 h-5" />
+            <span>{tweet?.replies}</span>
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex items-center space-x-2 text-gray-500 hover:text-green-500 transition-colors"
+            onClick={() => {}}
+          >
+            <Repeat2 className="w-5 h-5" />
+            <span>{tweet?.retweets}</span>
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className={`flex items-center space-x-2 transition-colors ${
+              isLiked
+                ? "text-red-500 hover:text-red-600"
+                : "text-gray-500 hover:text-red-500"
+            }`}
+            onClick={handleLikeClick}
+            disabled={isLikeLoading}
+          >
+            <Heart
+              className={`w-5 h-5 transition-transform duration-300 ${
+                isLiked ? "fill-current scale-110" : ""
+              }`}
+            />
+            <span className="font-semibold">{likeCount}</span>
+          </Button>
+        </div>
+      </CardFooter>
+      {canReply && (
+        <div className="m-4 rounded-lg shadow-md max-w-2xl">
+          <TweetForm tweetId={tweet?._id} />
+        </div>
+      )}
+    </Card>
+  );
+};