feat(Diff): Add Diff Component (#430)

src/Diff/Diff.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { StoryFn as Story, Meta } from '@storybook/react'
+
+import Diff, { DiffProps } from '.'
+
+const meta: Meta<DiffProps> = {
+  title: 'Data Display/Diff',
+  component: Diff,
+  parameters: {
+    controls: { expanded: true },
+  },
+}
+
+export default meta
+
+export const Default: Story<DiffProps> = ({ secondItem, ...args }) => (
+  <Diff
+    {...args}
+    secondItem={
+      <img
+        alt="daisy"
+        src="https://daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.jpg"
+      />
+    }
+  >
+    <img
+      alt="daisy"
+      src=" https://daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.jpg"
+    />
+  </Diff>
+)
+Default.argTypes = {
+  secondItem: {
+    control: false,
+  },
+}
+export const Text: Story<DiffProps> = ({ secondItem, ...args }) => (
+  <Diff
+    {...args}
+    secondItem={
+      <div className="bg-base-200 text-9xl font-black grid place-content-center">
+        DAISY
+      </div>
+    }
+  >
+    <div className="bg-primary text-primary-content text-9xl font-black grid place-content-center">
+      DAISY
+    </div>
+  </Diff>
+)
+Text.argTypes = {
+  secondItem: {
+    control: false,
+  },
+}

src/Diff/Diff.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef, ReactNode } from 'react'
+import clsx from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+import { IComponentBaseProps } from '../types'
+
+export type DiffProps = React.HTMLAttributes<HTMLDivElement> &
+  IComponentBaseProps & {
+    secondItem: ReactNode
+  }
+
+const Diff = forwardRef<HTMLDivElement, DiffProps>(
+  (
+    { dataTheme, className, children, secondItem, ...props },
+    ref
+  ): JSX.Element => {
+    const classes = twMerge('diff aspect-[16/9]', clsx({}), className)
+
+    return (
+      <div {...props} data-theme={dataTheme} className={classes} ref={ref}>
+        <div className="diff-item-1">{children}</div>
+        <div className="diff-item-2">{secondItem}</div>
+        <div className="diff-resizer" />
+      </div>
+    )
+  }
+)
+
+Diff.displayName = 'Diff'
+
+export default Diff

src/Diff/index.ts

@@ -0,0 +1,5 @@
+export * from './Diff';
+
+import Diff, { DiffProps as TDiffProps } from './Diff'
+export type DiffProps = TDiffProps
+export default Diff