update

Author: MrWangJustToDo

ui/react-example/src/components/MainContent/MainContentDiffExampleCode.tsx

@@ -10,6 +10,8 @@ const getCode = ({ theme, type }: { theme: "light" | "dark"; type: "react" | "vu
     ? `import { DiffView, DiffFile, DiffModeEnum } from "@git-diff-view/react";
 import { generateDiffFile } from "@git-diff-view/file";
 import "@git-diff-view/react/styles/diff-view.css";
+// or if you have your own tailwindcss setup
+import "@git-diff-view/react/styles/diff-view-pure.css";
 
 // git mode, use \`git diff\` output to render
 const getDiffFile = () => {
@@ -35,6 +37,8 @@ const App = () => {
   import { DiffView, DiffFile, DiffModeEnum } from "@git-diff-view/vue";
   import { generateDiffFile } from "@git-diff-view/file";
   import "@git-diff-view/vue/styles/diff-view.css";
+  // or if you have your own tailwindcss setup
+  import "@git-diff-view/react/styles/diff-view-pure.css";
 
   // git mode, use \`git diff\` output to render
   const getDiffFile = () => {

ui/react-example/src/components/PlayGround/ReactPlayGround.tsx

@@ -40,7 +40,7 @@ export const ReactPlayGround = () => {
   return (
     <Card className="p-0" withBorder>
       <Box className="flex items-center px-2 py-2 font-sans text-[14px]">
-        <IconBrandReact size="16" color="rgb(8,126,164)" className="mr-2" /> React
+        <IconBrandReact size="16" color="#75c3d9" className="mr-2" /> React
       </Box>
       <SandpackProvider
         template="vite-react-ts"

ui/react-example/src/views/Main/MainContent.tsx

@@ -14,6 +14,7 @@ import {
   getThemeColor,
   Container,
 } from "@mantine/core";
+import { IconBrandReact, IconBrandSolidjs, IconBrandSvelte, IconBrandVue } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 
 import { MainContentDiffAdvance, MainContentDiffConfig, MainContentDiffExample } from "../../components/MainContent";
@@ -37,7 +38,11 @@ export const MainContent = () => {
           <Title>Git Diff View</Title>
           <Space h="12" />
           <Text size="lg" component="div">
-            A <Code>Diff</Code> view component for React / Vue / Solid / Svelte,
+            A <Code>Diff</Code> view component for{" "}
+            <IconBrandReact className="inline text-[1.1em]" color="#75c3d9" size="1em" /> React /{" "}
+            <IconBrandVue className="inline text-[1.1em]" color="#42b883" size="1em" /> Vue /{" "}
+            <IconBrandSolidjs className="inline text-[1.1em]" color="#5176b7" size="1em" /> Solid /{" "}
+            <IconBrandSvelte className="inline text-[1.1em]" color="#eb5027" size="1em" /> Svelte,
             <Highlight highlight={["easy to use", "feature complete"]} color={color}>
               The most one component what easy to use and feature complete.
             </Highlight>