-
-
setUrl(event.target.value)}
- />
- {error &&
{error}
}
+
+
+
+
+ A simple yet powerful URL shortener for everyone.
+
+
+
+ Just paste your loooong 🧐 and boooring 😤 URL, and see the magic
+ happen! 🎉
+
-
-
- {urls.length > 0 && (
-
- {urls.map((url) => (
- -
-
-
{url.url.title}
-
- {(url.click_count || 0) > 0 &&
-
{url.click_count} clicks
- }
+ {/* header */}
+
+
+
+
+
+
+ Shortened links.
+
+
+ {/* NOTE: Can be deleted if unnecessary */}
+ {urls.length > 0 && (
+
Total: #count
+ )}
+
+
+ {urls.length ? (
+
+
+
+
+
+ ) : (
+
+ There is no
+ shortened link yet.
+
+ )}
+
+
+ Gimly © {new Date().getFullYear()}
+
✦
+
+ GitHub
+
+
+ {/* container */}
+
);
-}
+};
-export default IndexPage;
\ No newline at end of file
+export default IndexPage;
diff --git a/web/src/index.css b/web/src/index.css
index ec2585e..7b21eb8 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,13 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ background-color: #f4f4f5;
+ background-image: radial-gradient(
+ rgba(136, 136, 137, 0.4) 1.05px,
+ #f4f4f5 1.05px
+ );
+ background-size: 21px 21px;
}
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
+button,
+input {
+ @apply !outline-none;
}
diff --git a/web/src/index.tsx b/web/src/index.tsx
index 032464f..ccbac81 100644
--- a/web/src/index.tsx
+++ b/web/src/index.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(
- document.getElementById('root') as HTMLElement
+ document.getElementById("root") as HTMLElement
);
root.render(
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
new file mode 100644
index 0000000..37cc651
--- /dev/null
+++ b/web/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./src/**/*.{js,jsx,ts,tsx}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+};