-
Notifications
You must be signed in to change notification settings - Fork 268
-
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
image
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
image
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 1 comment
-
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.
Beta Was this translation helpful? Give feedback.