From 2bc484b6c43cd97ccf85cc9add9fa3cb72cf5919 Mon Sep 17 00:00:00 2001
From: Fatih Kaya <1994274@gmail.com>
Date: Sat, 18 May 2024 15:47:56 +0300
Subject: [PATCH] docs: styles & property name fix

---
 docs/src/Playground.tsx       | 8 +++++---
 docs/src/hooks/usePureHtml.ts | 8 ++++----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/docs/src/Playground.tsx b/docs/src/Playground.tsx
index 36cdab6..295530f 100644
--- a/docs/src/Playground.tsx
+++ b/docs/src/Playground.tsx
@@ -15,6 +15,7 @@ import {
 } from '@mantine/core';
 import { Editor, useMonaco } from '@monaco-editor/react';
 import {
+  IconFileExport,
   IconHtml,
   IconJson,
   IconSettingsAutomation,
@@ -33,7 +34,7 @@ export function Playground() {
   const [html, setHtml] = useState('');
   const [htmlFileContents, setHtmlFileContents] = useState<string | null>(null);
   const { configIsValid, result } = usePureHtml({
-    inputHTML: htmlFileContents ?? html,
+    inputHtml: htmlFileContents ?? html,
     configYaml: config,
   });
   const onHtmlFileChange = useCallback(
@@ -124,9 +125,10 @@ export function Playground() {
                   <FileInput
                     accept="text/html"
                     clearable
-                    label="Select an HTML file"
+                    placeholder="Select a file"
                     m="sm"
-                    mt="0"
+                    mt="xs"
+                    leftSection={<IconFileExport />}
                     onChange={onHtmlFileChange}
                   />
                 </Paper>
diff --git a/docs/src/hooks/usePureHtml.ts b/docs/src/hooks/usePureHtml.ts
index aca9aee..b44db50 100644
--- a/docs/src/hooks/usePureHtml.ts
+++ b/docs/src/hooks/usePureHtml.ts
@@ -10,10 +10,10 @@ export interface UsePureHtml {
 }
 
 export function usePureHtml({
-  inputHTML,
+  inputHtml,
   configYaml,
 }: {
-  inputHTML: string;
+  inputHtml: string;
   configYaml: string;
 }): UsePureHtml {
   const [state, setState] = useState<UsePureHtml>({
@@ -22,8 +22,8 @@ export function usePureHtml({
   });
   // cache cheerio.load call for handling big HTMLs
   const input = useMemo<cheerio.Root | null>(
-    () => (inputHTML ? load(inputHTML) : null),
-    [inputHTML]
+    () => (inputHtml ? load(inputHtml) : null),
+    [inputHtml]
   );
   const [config, setConfig] = useState<unknown>(null);