Refactored to use app folder.

src/app/(app)/websites/[id]/WebsiteDetails.js

@@ -0,0 +1,45 @@
+'use client';
+import { Loading } from 'react-basics';
+import { usePathname } from 'next/navigation';
+import Page from 'components/layout/Page';
+import FilterTags from 'components/metrics/FilterTags';
+import usePageQuery from 'components/hooks/usePageQuery';
+import { useWebsite } from 'components/hooks';
+import WebsiteChart from './WebsiteChart';
+import WebsiteMenuView from './WebsiteMenuView';
+import WebsiteHeader from './WebsiteHeader';
+import WebsiteMetricsBar from './WebsiteMetricsBar';
+import WebsiteTableView from '../WebsiteTableView';
+
+export default function WebsiteDetails({ websiteId }) {
+  const { data: website, isLoading, error } = useWebsite(websiteId);
+  const pathname = usePathname();
+  const showLinks = !pathname.includes('/share/');
+
+  const {
+    query: { view, url, referrer, os, browser, device, country, region, city, title },
+  } = usePageQuery();
+
+  if (isLoading || error) {
+    return <Page isLoading={isLoading} error={error} />;
+  }
+
+  return (
+    <>
+      <WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
+      <FilterTags
+        websiteId={websiteId}
+        params={{ url, referrer, os, browser, device, country, region, city, title }}
+      />
+      <WebsiteMetricsBar websiteId={websiteId} sticky={true} />
+      <WebsiteChart websiteId={websiteId} />
+      {!website && <Loading icon="dots" style={{ minHeight: 300 }} />}
+      {website && (
+        <>
+          {!view && <WebsiteTableView websiteId={websiteId} />}
+          {view && <WebsiteMenuView websiteId={websiteId} />}
+        </>
+      )}
+    </>
+  );
+}