feat(examples): ui improvements

refinedev · Jun 4, 2024 · 7ac2900 · 7ac2900
1 parent 67625b3
commit 7ac2900
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 20 deletions.
diff --git a/examples/win95/public/images/video-club-hero.png b/examples/win95/public/images/video-club-hero.png
diff --git a/examples/win95/public/images/video-tape-1.gif b/examples/win95/public/images/video-tape-1.gif
diff --git a/examples/win95/public/images/video-tape-2.gif b/examples/win95/public/images/video-tape-2.gif
diff --git a/examples/win95/src/App.tsx b/examples/win95/src/App.tsx
@@ -205,18 +205,22 @@ const App = () => {
                 <Route path="rvc-website" element={<Outlet />}>
                   <Route
                     index
+                    element={<Navigate to="/rvc-website/index.html" />}
+                  />
+                  <Route
+                    path="index.html"
                     element={<RVCWebsitePageHome withBrowser={false} />}
                   />
                   <Route
-                    path="titles/:titleId"
+                    path="titles/:titleId/index.html"
                     element={<RVCWebsitePageTitleDetails withBrowser={false} />}
                   />
                   <Route
-                    path="catalog"
+                    path="catalog/index.html"
                     element={<RVCWebsiteCatalogPage withBrowser={false} />}
                   />
                   <Route
-                    path="catalog/:catalogLetter"
+                    path="catalog/:catalogLetter/index.html"
                     element={<RVCWebsiteCatalogPage withBrowser={false} />}
                   />
                 </Route>

diff --git a/examples/win95/src/components/rvc-website/layout.tsx b/examples/win95/src/components/rvc-website/layout.tsx
@@ -17,7 +17,9 @@ export const RVCWebsiteLayout = ({
         <ContainerLinkList>
           <Link>
             <ReactRouterLink
-              to={withBrowser ? "/browser/rvc-website" : "/rvc-website"}
+              to={
+                withBrowser ? "/browser/rvc-website" : "/rvc-website/index.html"
+              }
             >
               Home
             </ReactRouterLink>
@@ -27,7 +29,7 @@ export const RVCWebsiteLayout = ({
               to={
                 withBrowser
                   ? "/browser/rvc-website/catalog"
-                  : "/rvc-website/catalog"
+                  : "/rvc-website/catalog/index.html"
               }
             >
               Our Catalog

diff --git a/examples/win95/src/routes/rvc-website/catalog.tsx b/examples/win95/src/routes/rvc-website/catalog.tsx
@@ -75,7 +75,7 @@ export const RVCWebsiteCatalogPage = ({ withBrowser = true }: Props) => {
                   to={
                     withBrowser
                       ? `/browser/rvc-website/titles/${title.id}`
-                      : `/rvc-website/titles/${title.id}`
+                      : `/rvc-website/titles/${title.id}/index.html`
                   }
                 >
                   <CatalogListMarkerContainer>
@@ -117,7 +117,7 @@ export const CatalogsList = ({
               to={
                 withBrowser
                   ? `/browser/rvc-website/catalog/${letter}`
-                  : `/rvc-website/catalog/${letter}`
+                  : `/rvc-website/catalog/${letter}/index.html`
               }
             >
               {letter}

diff --git a/examples/win95/src/routes/rvc-website/home.tsx b/examples/win95/src/routes/rvc-website/home.tsx
@@ -32,7 +32,24 @@ export const RVCWebsitePageHome = ({ withBrowser = true }: Props) => {
       address="http://www.refinevideoclub.geocities.com/index.html"
     >
       <RVCWebsiteLayout withBrowser={withBrowser}>
-        <Hero src={`${getImagesUrl("/rvc-hero-logo.png")}`} alt="rvc logo" />
+        <Hero>
+          <HeroVideoTape
+            src={`${getImagesUrl("/video-tape-1.gif")}`}
+            alt="video tape"
+          />
+          <HeroImage
+            src={`${getImagesUrl("/video-club-hero.png")}`}
+            alt="rvc logo"
+          />
+          <HeroVideoTape
+            src={`${getImagesUrl("/video-tape-2.gif")}`}
+            style={{
+              willChange: "transform",
+              transform: "scaleX(-1)",
+            }}
+            alt="video tape"
+          />
+        </Hero>
         <HeroTitle>“The best way to rent movies”</HeroTitle>
         <HeroDescription>
           We provide our members with more than 5.000 movie titles. If you want
@@ -41,10 +58,10 @@ export const RVCWebsitePageHome = ({ withBrowser = true }: Props) => {
         </HeroDescription>
 
         <NewGif src={`${getImagesUrl("/new.gif")}`} alt="new" />
-        <NewTitles />
+        <NewTitles withBrowser={withBrowser} />
 
         <Top10Gif src={`${getImagesUrl("/top10.gif")}`} alt="top10" />
-        <TopTitles />
+        <TopTitles withBrowser={withBrowser} />
 
         <SeparatorGif
           src={`${getImagesUrl("/separator.gif")}`}
@@ -67,7 +84,9 @@ export const RVCWebsitePageHome = ({ withBrowser = true }: Props) => {
   );
 };
 
-const NewTitles = () => {
+const NewTitles = (props: {
+  withBrowser?: boolean;
+}) => {
   const [controlledSwiper, setControlledSwiper] = useState<ISwiper | null>(
     null,
   );
@@ -96,7 +115,13 @@ const NewTitles = () => {
       >
         {titles?.map((title) => (
           <SwiperSlide key={title.id}>
-            <TitleContainer to={`titles/${title.id}`}>
+            <TitleContainer
+              to={
+                props.withBrowser
+                  ? `/browser/rvc-website/titles/${title.id}`
+                  : `/rvc-website/titles/${title.id}/index.html`
+              }
+            >
               <TitleImage
                 src={getTMDBImgLink({
                   path: title.poster_path,
@@ -117,13 +142,20 @@ const NewTitles = () => {
   );
 };
 
-const TopTitles = () => {
-  const { showUrl } = useNavigation();
-
+const TopTitles = (props: {
+  withBrowser?: boolean;
+}) => {
   return (
     <TopTitlesContainer>
       {TOP_TITLES.map((title) => (
-        <TitleContainer key={title.id} to={`titles/${title.id}`}>
+        <TitleContainer
+          key={title.id}
+          to={
+            props.withBrowser
+              ? `/browser/rvc-website/titles/${title.id}`
+              : `/rvc-website/titles/${title.id}/index.html`
+          }
+        >
           <TitleImage
             src={getTMDBImgLink({
               path: title.poster_path,
@@ -259,12 +291,24 @@ const AdvertisementBanners = () => {
   );
 };
 
-const Hero = styled.img`
-  display: block;
-  max-width: 872px;
+const Hero = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 48px;
   margin-top: 32px;
 `;
 
+const HeroImage = styled.img`
+  width: 376px;
+  height: 144px;
+`;
+
+const HeroVideoTape = styled.img`
+  width: 200px;
+  height: 182px;
+`;
+
 const HeroTitle = styled.h1`
   color: #ffff00;
   font-size: 40px;

diff --git a/examples/win95/src/routes/rvc-website/title-detail.tsx b/examples/win95/src/routes/rvc-website/title-detail.tsx
@@ -106,7 +106,9 @@ export const RVCWebsitePageTitleDetails = ({ withBrowser = true }: Props) => {
             </>
           )}
           <BackButton
-            to={withBrowser ? "/browser/rvc-website" : "/rvc-website"}
+            to={
+              withBrowser ? "/browser/rvc-website" : "/rvc-website/index.html"
+            }
           >
             <img
               style={{