Custom component

[mattos123]

Hello guys, im trying to build an app that uses endpoints on meta graph api (gaph.facebook.com), around the message templates manipulation(https://developers.facebook.com/docs/graph-api/reference/whats-app-business-account/message_templates/), so far so good, but i`m trying to develop a custom component to simulate whatsapp preview message, something alike this

i got this working code using react and so on (HTML/CSS/JS and the React.js library > https://docs.lowcoder.cloud/lowcoder-documentation/lowcoder-extension/custom-component

import React, { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { MessageCircle } from "lucide-react";

export default function WhatsAppSimulator() {
  const [title, setTitle] = useState("xxx");
  const [message, setMessage] = useState(
    "Olá xxxx, esta é uma campanha realizada xxx, realize seu xxxx através do link abaixo!"
  );
  const [footer, setFooter] = useState("Esta é uma mensagem automática.");
  const [buttonText, setButtonText] = useState("xxxx");

  return (
    <div className="flex flex-col items-center p-6 bg-gray-100 min-h-screen">
      <h1 className="text-2xl font-bold mb-4">Simulador de Mensagens do WhatsApp</h1>
      <Card className="w-96 p-4 shadow-lg">
        <CardContent className="bg-white p-4 rounded-lg border border-gray-200">
          <p className="font-bold text-green-700">{title}</p>
          <p className="mt-2 text-gray-800">{message}</p>
          <p className="mt-2 text-gray-500 text-sm">{footer}</p>
          <div className="mt-4 flex items-center text-blue-600 cursor-pointer">
            <MessageCircle className="mr-2" />
            <span>{buttonText}</span>
          </div>
        </CardContent>
      </Card>

      <div className="mt-6 w-96 p-4 bg-white rounded-lg shadow-md border border-gray-200">
        <h2 className="text-lg font-semibold mb-2">Personalizar Mensagem</h2>
        <Input placeholder="Título" value={title} onChange={(e) => setTitle(e.target.value)} className="mb-2" />
        <Textarea placeholder="Mensagem" value={message} onChange={(e) => setMessage(e.target.value)} className="mb-2" />
        <Input placeholder="Rodapé" value={footer} onChange={(e) => setFooter(e.target.value)} className="mb-2" />
        <Input placeholder="Texto do Botão" value={buttonText} onChange={(e) => setButtonText(e.target.value)} className="mb-2" />
        <Button className="w-full mt-2">Atualizar</Button>
      </div>
    </div>
  );
}

but when i try to use it on lowcoder i get something like this

[FalkWolsky]

Generally Lowcoder makes use of ANTd incl. all styles. https://ant.design/components/

I see that you include other components like: @/components/ui/card.
Likely their styles reference a CSS framework, that is not present in Lowcoder.
Could we suggest you to look and change these components to ANTd components?
Also, every styles that you want to apply, should be part already of your component.

Just as a random example, please have a look here: https://github.com/lowcoder-org/lowcoder/blob/main/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx

We make use of styled.div<{...}> for example.