import Image from "next/image";
import Link from "next/link";
import React from "react";
interface MetricProps {
imgUrl: string;
alt: string;
value: string;
title: string;
href?: string;
textStyles?: string;
author?: boolean;
}
const Metric = ({
imgUrl,
alt,
value,
title,
href,
textStyles,
author,
}: MetricProps) => {
const metricContent = (
<>
<Image
src={imgUrl}
alt={alt}
width={16}
height={16}
className={`object-contain ${href ? "rounded-full" : ""}`}
/>
<p className={`${textStyles} flex items-center gap-1`}>
{value}
<span
className={`small-regular line-clamp-1 ${author ? "max-sm:hidden" : ""}`}
>
{title}
</span>
</p>
</>
);
if (href) {
return (
<Link href={href} className="flex-center gap-1">
{metricContent}
</Link>
);
}
return <div className="flex-center flex-wrap gap-1">{metricContent}</div>;
};
export default Metric;
How to Create Prism Container
asked 6 months agoAsked
1 Answers
1 Views
"use client";
import React, { useEffect } from "react";
import Prism from "prismjs";
import parse from "html-react-parser";
import "prismjs/components/prism-python";
import "prismjs/components/prism-java";
import "prismjs/components/prism-c";
import "prismjs/components/prism-cpp";
import "prismjs/components/prism-csharp";
import "prismjs/components/prism-aspnet";
import "prismjs/components/prism-sass";
import "prismjs/components/prism-jsx";
import "prismjs/components/prism-typescript";
import "prismjs/components/prism-solidity";
import "prismjs/components/prism-json";
import "prismjs/components/prism-dart";
import "prismjs/components/prism-ruby";
import "prismjs/components/prism-rust";
import "prismjs/components/prism-r";
import "prismjs/components/prism-kotlin";
import "prismjs/components/prism-go";
import "prismjs/components/prism-bash";
import "prismjs/components/prism-sql";
import "prismjs/components/prism-mongodb";
import "prismjs/plugins/line-numbers/prism-line-numbers.js";
import "prismjs/plugins/line-numbers/prism-line-numbers.css";
interface Props {
data: string;
}
const ParseHTML = ({ data }: Props) => {
useEffect(() => {
Prism.highlightAll();
}, []);
return <div>{parse(data)}</div>;
};
export default ParseHTML;
Basically i use this currently
