display site name (#2)

index.html

@@ -5,6 +5,7 @@
     font-family: "Inter", sans-serif;
     font-size: 12px;
     background-color: #2b2b2b;
+    color: #d9d9d9;
   }
 </style>
 <div id="root"></div>

src/components/Dropdown/Dropdown.tsx

@@ -78,13 +78,14 @@ export const Dropdown: React.FC<DropdownProps> = (props) => {
           display: "grid",
           alignItems: "center",
           gap: 2,
+          lineHeight: 2.4,
         }}
       >
         <span style={{ flex: 1 }}>
           {props.options.find(({ value }) => selected === value)!.label}
         </span>
         <Icon
-          styles={{ textAlign: "right", marginRight: 12 }}
+          styles={{ textAlign: "right", marginRight: 12, marginLeft: 12 }}
           name="chevron-down"
         />
       </div>

src/components/Icon/Icon.tsx

@@ -17,10 +17,6 @@ export const icons = {
   ),
   "chevron-down": (
     <svg
-      style={{
-        position: "absolute",
-        top: -2,
-      }}
       width="9"
       height="6"
       viewBox="0 0 9 6"

src/pages/MetricDetailsPage.tsx

@@ -5,11 +5,13 @@ import { MetricType } from "../generated/graphql";
 
 export const MetricDetailsPage: React.FC = () => {
   const [path, setPath] = useState<string>();
+  const [name, setName] = useState<string>();
   const [timeframe, setTimeframe] = useState<string>("Last30days");
 
   useEffect(() => {
     const unsubscribeCurrentPage = webflow.subscribe("currentpage", (page) => {
       setPath(`/${page.getSlug()}`);
+      setName(`${page.getName()}`);
     });
     webflow.getCurrentPage().then((page) => setPath(`/${page.getSlug()}`));
     return () => {
@@ -19,19 +21,34 @@ export const MetricDetailsPage: React.FC = () => {
 
   return (
     <div>
-      <Dropdown
-        selected="Last30days"
-        options={[
-          { label: "Last 7 days", value: "Last7days" },
-          { label: "Last 30 days", value: "Last30days" },
-          { label: "Last 3 Months", value: "Last3Months" },
-          { label: "Last 6 Months", value: "Last6Months" },
-          { label: "Last Year", value: "LastYear" },
-        ]}
-        onChange={(value) => {
-          setTimeframe(value);
-        }}
-      />
+      <div style={{ display: "flex" }}>
+        <div
+          style={{
+            flex: 1,
+            fontSize: 15,
+            lineHeight: 2,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            minWidth: 0,
+          }}
+        >
+          {name}
+        </div>
+        <Dropdown
+          selected="Last30days"
+          options={[
+            { label: "Last 7 days", value: "Last7days" },
+            { label: "Last 30 days", value: "Last30days" },
+            { label: "Last 3 Months", value: "Last3Months" },
+            { label: "Last 6 Months", value: "Last6Months" },
+            { label: "Last Year", value: "LastYear" },
+          ]}
+          onChange={(value) => {
+            setTimeframe(value);
+          }}
+        />
+      </div>
       <div style={{ marginTop: 10 }}>
         <Chart input={{ path, metricType: MetricType.View, timeframe }} />
       </div>

vite.config.ts

@@ -13,9 +13,6 @@ export default defineConfig({
     host: true,
     port: 1337,
   },
-  optimizeDeps: {
-    exclude: ["./webflow"],
-  },
   define: {
     "process.env": {
       ...process.env,