Skip to content

Instantly share code, notes, and snippets.

@Vetrivel-VP

Vetrivel-VP/gist:4cc637208b875aae3aa1835031877670

Created September 26, 2025 11:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Vetrivel-VP/4cc637208b875aae3aa1835031877670 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Vetrivel-VP/4cc637208b875aae3aa1835031877670 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
UI Code
-------------------------------------------------------------------------------------------------------------------------------
"use client";
import React, { useRef, useState } from "react";
import { toast } from "sonner";
import { Button } from "../ui/button";
import { Check, Copy } from "lucide-react";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { useTemplateStore } from "@/store/use-template-store";
export const TemplateJ5TFPR = () => {
const { data } = useTemplateStore();
const signatureRef = useRef<HTMLTableElement>(null);
const [copied, setCopied] = useState(false);
const handleCopy = async () => {
if (signatureRef.current) {
try {
const html = signatureRef.current.outerHTML;
await navigator.clipboard.write([
new ClipboardItem({
"text/html": new Blob([html], { type: "text/html" }),
"text/plain": new Blob([html], { type: "text/plain" }),
}),
]);
setCopied(true);
toast.message("Signature copied!", {
description: "✅ You can paste it into your email client.",
});
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error("Failed to copy: ", err);
toast.message("Error!", {
description: `Failed to copy: ${(err as Error)?.message}`,
});
}
}
};
return (
<div>
<div className="w-full my-4 flex items-center justify-end">
<Tooltip>
<TooltipTrigger asChild>
<Button onClick={handleCopy} size="icon" className="cursor-pointer">
{copied ? <Check /> : <Copy />}
</Button>
</TooltipTrigger>
<TooltipContent>
<p>{copied ? "Copied!" : "Copy"}</p>
</TooltipContent>
</Tooltip>
</div>
<table
cellPadding={0}
cellSpacing={0}
border={0}
style={{
width: "600px",
fontFamily: "Arial, sans-serif",
borderCollapse: "collapse",
}}
ref={signatureRef}
>
<tbody>
<tr style={{ background: "white" }}>
{/* Left column (photo) */}
<td style={{ width: "200px", padding: 5, verticalAlign: "top" }}>
<div
style={{
position: "relative",
width: "200px",
height: "260px",
}}
>
{/* <div
style={{
position: "absolute",
top: "-5px", // move slightly above
right: "-5px", // move slightly right
width: "120px",
height: "120px",
backgroundColor: data.styleData.firstFontColor
? data.styleData.firstFontColor
: "#5c8d45", // green
zIndex: 0,
borderTopLeftRadius: 10,
borderBottomRightRadius: 10,
}}
/> */}
<img
src={
data?.personalData?.image ||
"https://cdn.pixabay.com/photo/2023/11/10/02/30/woman-8378634_1280.jpg"
}
alt="Profile"
style={{
display: "block",
width: "200px",
height: "260px",
border: 0,
objectFit: "cover",
position: "relative",
zIndex: 1,
borderRadius: 4,
}}
/>
</div>
</td>
{/* Right column (details) */}
<td
style={{
padding: "20px",
verticalAlign: "middle",
backgroundColor: "#ffffff",
}}
>
<table
cellPadding={0}
cellSpacing={0}
border={0}
style={{
width: "100%",
fontSize: "14px",
color: data.styleData.secondFontColor
? data.styleData.secondFontColor
: "#333",
}}
>
<tbody>
{/* Name */}
<tr>
<td
style={{
fontSize: "24px",
fontWeight: "bold",
color: data?.styleData.firstFontColor
? data?.styleData.firstFontColor
: "#5c8d45",
fontFamily: "'Segoe Script', cursive",
paddingBottom: "4px",
}}
>
{data.personalData.firstname
? `${data?.personalData?.firstname} ${data?.personalData?.lastname}`
: "Estelle Darcy"}
</td>
</tr>
{/* Title */}
<tr>
<td
style={{
fontSize: "14px",
color: data.styleData.secondFontColor
? data.styleData.secondFontColor
: "#333",
paddingBottom: "15px",
}}
>
<span
style={{
borderBottom: "1px solid #5c8d45",
marginRight: "6px",
display: "inline-block",
width: "20px",
}}
></span>
{data?.personalData?.title
? data?.personalData?.title
: "Food Blogger"}
</td>
</tr>
{/* Phone */}
<tr>
<td style={{ paddingBottom: "6px" }}>
📞{" "}
<a
href="tel:+1234567890"
style={{
color: data.styleData.secondFontColor
? data.styleData.secondFontColor
: "#333",
textDecoration: "none",
}}
>
{data.personalData.mobile
? data.personalData.mobile
: "+123-456-7890"}
</a>
</td>
</tr>
{/* Email */}
<tr>
<td style={{ paddingBottom: "6px" }}>
✉️{" "}
<a
href="mailto:[email protected]"
style={{
color: data.styleData.secondFontColor
? data.styleData.secondFontColor
: "#333",
textDecoration: "none",
}}
>
{data.personalData.email
? data.personalData.email
: " [email protected]"}
</a>
</td>
</tr>
{/* Website */}
<tr>
<td style={{ paddingBottom: "6px" }}>
🌐{" "}
<a
href={
data.companyData.website
? data.companyData.website
: "#"
}
style={{
color: data.styleData.secondFontColor
? data.styleData.secondFontColor
: "#333",
textDecoration: "none",
}}
>
{data.companyData.website
? data.companyData.website
: "www.reallygreatsite.com"}
</a>
</td>
</tr>
{/* Address */}
<tr>
<td style={{ paddingBottom: "6px" }}>
📍{" "}
{data.companyData.address1
? data.companyData.address1
: "123 Anywhere St., "}
<br />
<span style={{ paddingLeft: 22 }}>
{data.companyData.address2
? data.companyData.address2
: " Any City, ST 12345"}
</span>
</td>
</tr>
<tr>
<td
style={{
paddingBottom: "6px",
display: "flex",
alignItems: "center",
justifyContent: "start",
gap: 6,
}}
>
{data.socialsData.dribble && (
<a href={data.socialsData.dribble}>
{/* <svg
width={16}
height={16}
fill="pink"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="M256 8a248 248 0 1 0 0 496 248 248 0 1 0 0-496zM420 122.4c29.5 36 47.4 82 47.8 132-7-1.5-77-15.7-147.5-6.8-5.8-14-11.2-26.4-18.6-41.6 78.3-32 113.8-77.5 118.3-83.5zM396.4 97.9c-3.8 5.4-35.7 48.3-111 76.5-34.7-63.8-73.2-116.2-79-124 67.2-16.2 138 1.3 190.1 47.5zM165.9 64.6c5.6 7.7 43.4 60.1 78.5 122.5-99.1 26.3-186.4 25.9-195.8 25.8 13.7-65.7 58-120.4 117.3-148.3zM44.2 256.3c0-2.2 0-4.3 .1-6.5 9.3 .2 111.9 1.5 217.7-30.1 6.1 11.9 11.9 23.9 17.2 35.9-76.6 21.6-146.2 83.5-180.5 142.3-33.8-37.6-54.5-87.2-54.5-141.6zM126 423.4c22.1-45.2 82.2-103.6 167.6-132.8 29.7 77.3 42 142.1 45.2 160.6-68.1 29-150 21.1-212.8-27.9zm248.4 8.5c-2.2-12.9-13.4-74.9-41.2-151 66.4-10.6 124.7 6.8 131.9 9.1-9.4 58.9-43.3 109.8-90.8 142z" />
</svg> */}
<img
src="/svg/dribbble.svg"
alt="Phone"
width="16"
height="16"
style={{
verticalAlign: "middle",
}}
/>
</a>
)}
{data.socialsData.facebook && (
<a href={data.socialsData.facebook}>
<svg
width={16}
height={16}
fill="blue"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
>
<path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l98.2 0 0-145.8-52.8 0 0-78.2 52.8 0 0-33.7c0-87.1 39.4-127.5 125-127.5 16.2 0 44.2 3.2 55.7 6.4l0 70.8c-6-.6-16.5-1-29.6-1-42 0-58.2 15.9-58.2 57.2l0 27.8 83.6 0-14.4 78.2-69.3 0 0 145.8 129 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z" />
</svg>
</a>
)}
{data.socialsData.github && (
<a href={data.socialsData.github}>
<svg
width={16}
height={16}
fill="gray"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 640"
>
<path d="M237.9 461.4C237.9 463.4 235.6 465 232.7 465C229.4 465.3 227.1 463.7 227.1 461.4C227.1 459.4 229.4 457.8 232.3 457.8C235.3 457.5 237.9 459.1 237.9 461.4zM206.8 456.9C206.1 458.9 208.1 461.2 211.1 461.8C213.7 462.8 216.7 461.8 217.3 459.8C217.9 457.8 216 455.5 213 454.6C210.4 453.9 207.5 454.9 206.8 456.9zM251 455.2C248.1 455.9 246.1 457.8 246.4 460.1C246.7 462.1 249.3 463.4 252.3 462.7C255.2 462 257.2 460.1 256.9 458.1C256.6 456.2 253.9 454.9 251 455.2zM316.8 72C178.1 72 72 177.3 72 316C72 426.9 141.8 521.8 241.5 555.2C254.3 557.5 258.8 549.6 258.8 543.1C258.8 536.9 258.5 502.7 258.5 481.7C258.5 481.7 188.5 496.7 173.8 451.9C173.8 451.9 162.4 422.8 146 415.3C146 415.3 123.1 399.6 147.6 399.9C147.6 399.9 172.5 401.9 186.2 425.7C208.1 464.3 244.8 453.2 259.1 446.6C261.4 430.6 267.9 419.5 275.1 412.9C219.2 406.7 162.8 398.6 162.8 302.4C162.8 274.9 170.4 261.1 186.4 243.5C183.8 237 175.3 210.2 189 175.6C209.9 169.1 258 202.6 258 202.6C278 197 299.5 194.1 320.8 194.1C342.1 194.1 363.6 197 383.6 202.6C383.6 202.6 431.7 169 452.6 175.6C466.3 210.3 457.8 237 455.2 243.5C471.2 261.2 481 275 481 302.4C481 398.9 422.1 406.6 366.2 412.9C375.4 420.8 383.2 435.8 383.2 459.3C383.2 493 382.9 534.7 382.9 542.9C382.9 549.4 387.5 557.3 400.2 555C500.2 521.8 568 426.9 568 316C568 177.3 455.5 72 316.8 72zM169.2 416.9C167.9 417.9 168.2 420.2 169.9 422.1C171.5 423.7 173.8 424.4 175.1 423.1C176.4 422.1 176.1 419.8 174.4 417.9C172.8 416.3 170.5 415.6 169.2 416.9zM158.4 408.8C157.7 410.1 158.7 411.7 160.7 412.7C162.3 413.7 164.3 413.4 165 412C165.7 410.7 164.7 409.1 162.7 408.1C160.7 407.5 159.1 407.8 158.4 408.8zM190.8 444.4C189.2 445.7 189.8 448.7 192.1 450.6C194.4 452.9 197.3 453.2 198.6 451.6C199.9 450.3 199.3 447.3 197.3 445.4C195.1 443.1 192.1 442.8 190.8 444.4zM179.4 429.7C177.8 430.7 177.8 433.3 179.4 435.6C181 437.9 183.7 438.9 185 437.9C186.6 436.6 186.6 434 185 431.7C183.6 429.4 181 428.4 179.4 429.7z" />
</svg>
</a>
)}
{data.socialsData.instagram && (
<a href={data.socialsData.instagram}>
<svg
width={16}
height={16}
fill="pink"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 640"
>
<path d="M320.3 205C256.8 204.8 205.2 256.2 205 319.7C204.8 383.2 256.2 434.8 319.7 435C383.2 435.2 434.8 383.8 435 320.3C435.2 256.8 383.8 205.2 320.3 205zM319.7 245.4C360.9 245.2 394.4 278.5 394.6 319.7C394.8 360.9 361.5 394.4 320.3 394.6C279.1 394.8 245.6 361.5 245.4 320.3C245.2 279.1 278.5 245.6 319.7 245.4zM413.1 200.3C413.1 185.5 425.1 173.5 439.9 173.5C454.7 173.5 466.7 185.5 466.7 200.3C466.7 215.1 454.7 227.1 439.9 227.1C425.1 227.1 413.1 215.1 413.1 200.3zM542.8 227.5C541.1 191.6 532.9 159.8 506.6 133.6C480.4 107.4 448.6 99.2 412.7 97.4C375.7 95.3 264.8 95.3 227.8 97.4C192 99.1 160.2 107.3 133.9 133.5C107.6 159.7 99.5 191.5 97.7 227.4C95.6 264.4 95.6 375.3 97.7 412.3C99.4 448.2 107.6 480 133.9 506.2C160.2 532.4 191.9 540.6 227.8 542.4C264.8 544.5 375.7 544.5 412.7 542.4C448.6 540.7 480.4 532.5 506.6 506.2C532.8 480 541 448.2 542.8 412.3C544.9 375.3 544.9 264.5 542.8 227.5zM495 452C487.2 471.6 472.1 486.7 452.4 494.6C422.9 506.3 352.9 503.6 320.3 503.6C287.7 503.6 217.6 506.2 188.2 494.6C168.6 486.8 153.5 471.7 145.6 452C133.9 422.5 136.6 352.5 136.6 319.9C136.6 287.3 134 217.2 145.6 187.8C153.4 168.2 168.5 153.1 188.2 145.2C217.7 133.5 287.7 136.2 320.3 136.2C352.9 136.2 423 133.6 452.4 145.2C472 153 487.1 168.1 495 187.8C506.7 217.3 504 287.3 504 319.9C504 352.5 506.7 422.6 495 452z" />
</svg>
</a>
)}
{data.socialsData.pintrest && (
<a href={data.socialsData.pintrest}>
<svg
width={16}
height={16}
fill="red"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 640"
>
<path d="M568 320C568 457 457 568 320 568C294.4 568 269.8 564.1 246.6 556.9C256.7 540.4 271.8 513.4 277.4 491.9C280.4 480.3 292.8 432.9 292.8 432.9C300.9 448.3 324.5 461.4 349.6 461.4C424.4 461.4 478.3 392.6 478.3 307.1C478.3 225.2 411.4 163.9 325.4 163.9C218.4 163.9 161.5 235.7 161.5 314C161.5 350.4 180.9 395.7 211.8 410.1C216.5 412.3 219 411.3 220.1 406.8C220.9 403.4 225.1 386.5 227 378.7C227.6 376.2 227.3 374 225.3 371.6C215.2 359.1 207 336.3 207 315C207 260.3 248.4 207.4 319 207.4C379.9 207.4 422.6 248.9 422.6 308.3C422.6 375.4 388.7 421.9 344.6 421.9C320.3 421.9 302 401.8 307.9 377.1C314.9 347.6 328.4 315.8 328.4 294.5C328.4 275.5 318.2 259.6 297 259.6C272.1 259.6 252.1 285.3 252.1 319.8C252.1 341.8 259.5 356.6 259.5 356.6C259.5 356.6 235 460.4 230.5 479.8C225.5 501.2 227.5 531.4 229.6 551C137.4 514.9 72 425.1 72 320C72 183 183 72 320 72C457 72 568 183 568 320z" />
</svg>
</a>
)}
{data.socialsData.redit && (
<a href={data.socialsData.redit}>
<svg
width={16}
height={16}
fill="red"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 640"
>
<path d="M278.7 64.7C296 68.4 307 85.4 303.3 102.7L284.2 192L410.7 192L432.7 89.3C436.4 72 453.4 61 470.7 64.7C488 68.4 499 85.4 495.3 102.7L476.2 192L544 192C561.7 192 576 206.3 576 224C576 241.7 561.7 256 544 256L462.4 256L435 384L502.8 384C520.5 384 534.8 398.3 534.8 416C534.8 433.7 520.5 448 502.8 448L421.2 448L399.2 550.7C395.5 568 378.5 579 361.2 575.3C343.9 571.6 332.9 554.6 336.6 537.3L355.7 448L229.2 448L207.2 550.7C203.5 568 186.5 579 169.2 575.3C151.9 571.6 140.9 554.6 144.6 537.3L163.8 448L96 448C78.3 448 64 433.7 64 416C64 398.3 78.3 384 96 384L177.6 384L205 256L137.2 256C119.5 256 105.2 241.7 105.2 224C105.2 206.3 119.5 192 137.2 192L218.8 192L240.8 89.3C244.4 72 261.4 61 278.7 64.7zM270.4 256L243 384L369.5 384L396.9 256L270.4 256z" />
</svg>
</a>
)}
{data.socialsData.tiktok && (
<a href={data.socialsData.tiktok}>
<svg
width={16}
height={16}
fill="gray"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 640"
>
<path d="M544.5 273.9C500.5 274 457.5 260.3 421.7 234.7L421.7 413.4C421.7 446.5 411.6 478.8 392.7 506C373.8 533.2 347.1 554 316.1 565.6C285.1 577.2 251.3 579.1 219.2 570.9C187.1 562.7 158.3 545 136.5 520.1C114.7 495.2 101.2 464.1 97.5 431.2C93.8 398.3 100.4 365.1 116.1 336C131.8 306.9 156.1 283.3 185.7 268.3C215.3 253.3 248.6 247.8 281.4 252.3L281.4 342.2C266.4 337.5 250.3 337.6 235.4 342.6C220.5 347.6 207.5 357.2 198.4 369.9C189.3 382.6 184.4 398 184.5 413.8C184.6 429.6 189.7 444.8 199 457.5C208.3 470.2 221.4 479.6 236.4 484.4C251.4 489.2 267.5 489.2 282.4 484.3C297.3 479.4 310.4 469.9 319.6 457.2C328.8 444.5 333.8 429.1 333.8 413.4L333.8 64L421.8 64C421.7 71.4 422.4 78.9 423.7 86.2C426.8 102.5 433.1 118.1 442.4 131.9C451.7 145.7 463.7 157.5 477.6 166.5C497.5 179.6 520.8 186.6 544.6 186.6L544.6 274z" />
</svg>
</a>
)}
{data.socialsData.twitch && (
<a href={data.socialsData.twitch}>
<svg
width={16}
height={16}
fill="pink"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 640"
>
<path d="M455.4 167.5L416.8 167.5L416.8 277.2L455.4 277.2L455.4 167.5zM349.2 167L310.6 167L310.6 276.8L349.2 276.8L349.2 167zM185 64L88.5 155.4L88.5 484.6L204.3 484.6L204.3 576L300.8 484.6L378.1 484.6L551.9 320L551.9 64L185 64zM513.3 301.8L436.1 374.9L358.9 374.9L291.3 438.9L291.3 374.9L204.4 374.9L204.4 100.6L513.3 100.6L513.3 301.8z" />
</svg>
</a>
)}
{data.socialsData.twitter && (
<a href={data.socialsData.twitter}>
<svg
width={16}
height={16}
fill="gray"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 640"
>
<path d="M453.2 112L523.8 112L369.6 288.2L551 528L409 528L297.7 382.6L170.5 528L99.8 528L264.7 339.5L90.8 112L236.4 112L336.9 244.9L453.2 112zM428.4 485.8L467.5 485.8L215.1 152L173.1 152L428.4 485.8z" />
</svg>
</a>
)}
{data.socialsData.whatsapp && (
<a href={data.socialsData.whatsapp}>
<svg
width={16}
height={16}
fill="green"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 640"
>
<path d="M476.9 161.1C435 119.1 379.2 96 319.9 96C197.5 96 97.9 195.6 97.9 318C97.9 357.1 108.1 395.3 127.5 429L96 544L213.7 513.1C246.1 530.8 282.6 540.1 319.8 540.1L319.9 540.1C442.2 540.1 544 440.5 544 318.1C544 258.8 518.8 203.1 476.9 161.1zM319.9 502.7C286.7 502.7 254.2 493.8 225.9 477L219.2 473L149.4 491.3L168 423.2L163.6 416.2C145.1 386.8 135.4 352.9 135.4 318C135.4 216.3 218.2 133.5 320 133.5C369.3 133.5 415.6 152.7 450.4 187.6C485.2 222.5 506.6 268.8 506.5 318.1C506.5 419.9 421.6 502.7 319.9 502.7zM421.1 364.5C415.6 361.7 388.3 348.3 383.2 346.5C378.1 344.6 374.4 343.7 370.7 349.3C367 354.9 356.4 367.3 353.1 371.1C349.9 374.8 346.6 375.3 341.1 372.5C308.5 356.2 287.1 343.4 265.6 306.5C259.9 296.7 271.3 297.4 281.9 276.2C283.7 272.5 282.8 269.3 281.4 266.5C280 263.7 268.9 236.4 264.3 225.3C259.8 214.5 255.2 216 251.8 215.8C248.6 215.6 244.9 215.6 241.2 215.6C237.5 215.6 231.5 217 226.4 222.5C221.3 228.1 207 241.5 207 268.8C207 296.1 226.9 322.5 229.6 326.2C232.4 329.9 268.7 385.9 324.4 410C359.6 425.2 373.4 426.5 391 423.9C401.7 422.3 423.8 410.5 428.4 397.5C433 384.5 433 373.4 431.6 371.1C430.3 368.6 426.6 367.2 421.1 364.5z" />
</svg>
</a>
)}
{data.socialsData.youtube && (
<a href={data.socialsData.youtube}>
<svg
width={16}
height={16}
fill="red"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 640"
>
<path d="M581.7 188.1C575.5 164.4 556.9 145.8 533.4 139.5C490.9 128 320.1 128 320.1 128C320.1 128 149.3 128 106.7 139.5C83.2 145.8 64.7 164.4 58.4 188.1C47 231 47 320.4 47 320.4C47 320.4 47 409.8 58.4 452.7C64.7 476.3 83.2 494.2 106.7 500.5C149.3 512 320.1 512 320.1 512C320.1 512 490.9 512 533.5 500.5C557 494.2 575.5 476.3 581.8 452.7C593.2 409.8 593.2 320.4 593.2 320.4C593.2 320.4 593.2 231 581.8 188.1zM264.2 401.6L264.2 239.2L406.9 320.4L264.2 401.6z" />
</svg>
</a>
)}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
{data?.graphicsData?.bannerUrl && (
<tr>
<td colSpan={2}>
<a
href={
data.graphicsData.bannerLink
? data.graphicsData.bannerLink
: "#"
}
>
<img
src={data?.graphicsData?.bannerUrl || "./banner.gif"}
alt="Animated Banner"
style={{
width: "100%",
height: "160px",
border: 0,
objectFit: "cover",
position: "relative",
zIndex: 1,
}}
/>
</a>
</td>
</tr>
)}
</tbody>
</table>
</div>
);
};
-------------------------------------------------------------------------------------------------------------------------------
types/index.ts
-------------------------------------------------------------------------------------------------------------------------------
import { LucideIcon } from "lucide-react";
export interface NavLinkProps {
label: string;
link: string;
Icon: LucideIcon;
protected?: boolean;
}
export interface TemplateData {
personalData: {
firstname: string;
lastname: string;
title: string;
email: string;
mobile: string;
image: string;
};
companyData: {
company: string;
website: string;
address1: string;
address2: string;
};
graphicsData: {
bannerUrl: string;
bannerLink: string;
};
styleData: {
firstFontColor: string;
secondFontColor: string;
};
socialsData: {
youtube: string;
github: string;
facebook: string;
twitter: string;
instagram: string;
whatsapp: string;
pintrest: string;
dribble: string;
tiktok: string;
twitch: string;
snapshot: string;
redit: string;
};
}
-------------------------------------------------------------------------------------------------------------------------------
lib/helpers.ts
-------------------------------------------------------------------------------------------------------------------------------
import { NavLinkProps } from "@/types";
import { Home, Info, LayoutDashboard, Mail, User, Users } from "lucide-react";
export const NavMenus: NavLinkProps[] = [
{
label: "Home",
link: "/",
Icon: Home,
},
{
label: "About",
link: "/about",
Icon: Info,
},
{
label: "Contact",
link: "/contact",
Icon: Mail,
},
{
label: "Profile",
link: "/profile",
Icon: User,
protected: true,
},
];
export const DBNavMenus: NavLinkProps[] = [
{
label: "Overview",
link: "/dashboard",
Icon: LayoutDashboard,
},
{
label: "Users",
link: "/dashboard/users",
Icon: Users,
},
];
export const Professions = [
"Designer",
"Developer",
"Manager",
"Marketer",
"Engineer",
"Writer",
"Consultant",
"Teacher",
"Doctor",
"Artist",
];
-------------------------------------------------------------------------------------------------------------------------------
animations/index.ts
-------------------------------------------------------------------------------------------------------------------------------
export const fadeInButton = {
initial: { opacity: 0, scale: 0.9 },
animate: { opacity: 1, scale: 1 },
exit: { opacity: 0, scale: 0.9 },
transition: { duration: 0.5, ease: "easeOut", delay: 0.2 },
};
export const fadeInOut = {
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
};
-------------------------------------------------------------------------------------------------------------------------------
config/firebase.config.ts
-------------------------------------------------------------------------------------------------------------------------------
import { getApp, getApps, initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY!,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN!,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID!,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET!,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID!,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID!,
measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID!,
};
const app = getApps.length > 0 ? getApp() : initializeApp(firebaseConfig);
const fileStorage = getStorage(app);
export { fileStorage };
-------------------------------------------------------------------------------------------------------------------------------
.env
-------------------------------------------------------------------------------------------------------------------------------
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_your_publishable_key
CLERK_SECRET_KEY=sk_test_your_secret_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id
DATABASE_URL=postgresql://user:password@host:port/database
NEXT_PUBLIC_SUPER_ADMIN=your_super_admin_id
-------------------------------------------------------------------------------------------------------------------------------
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment