initial commit

src/App.css

@@ -0,0 +1 @@
+/* empty file here */

src/App.tsx

@@ -0,0 +1,12 @@
+import './App.css';
+import { SelectFile } from './SelectFile';
+
+function App() {
+  return (
+    <main>
+      <SelectFile />
+    </main>
+  );
+}
+
+export default App;

src/PointerLabel.tsx

@@ -0,0 +1,5 @@
+import styled from '@emotion/styled';
+
+export const PointerLabel = styled.label`
+  cursor: pointer;
+`;

src/SelectFile.tsx

@@ -0,0 +1,25 @@
+import { Box, Stack, Text } from '@chakra-ui/react';
+import { UnlockIcon } from '@chakra-ui/icons';
+import { useId } from 'react';
+import { PointerLabel } from './PointerLabel';
+
+export function SelectFile() {
+  const id = useId();
+
+  return (
+    <Box borderWidth="1px" borderRadius="lg" p="6">
+      <Stack alignItems="center">
+        <UnlockIcon />
+        <Box>
+          将文件拖到此处，或
+          <PointerLabel htmlFor={id}>
+            <Text as="span" color="teal.400">
+              点击选择
+            </Text>
+          </PointerLabel>
+          <input id={id} type="file" hidden multiple />
+        </Box>
+      </Stack>
+    </Box>
+  );
+}

src/index.css

@@ -0,0 +1,69 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/main.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+import { ChakraProvider } from '@chakra-ui/react';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <ChakraProvider>
+      <App />
+    </ChakraProvider>
+  </React.StrictMode>
+);

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />