From 7875fedc83869f2008ca2c53024b701ff54799f7 Mon Sep 17 00:00:00 2001
From: synzr <mikhail@synzr.space>
Date: Mon, 1 Dec 2025 11:04:21 +0500
Subject: [PATCH] feat(components/tiles/pages): text page

---
 src/lib/components/tiles/Tile.svelte          |  7 ++++
 .../tiles/pages/TileIconPage.svelte           |  8 +---
 .../tiles/pages/TileImagePage.svelte          |  9 ++++-
 .../tiles/pages/TileTextPage.svelte           | 37 +++++++++++++++++++
 src/routes/(tiles)/+page.svelte               | 17 +++++----
 5 files changed, 61 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/components/tiles/pages/TileTextPage.svelte

diff --git a/src/lib/components/tiles/Tile.svelte b/src/lib/components/tiles/Tile.svelte
index 189ea22..8506ad2 100644
--- a/src/lib/components/tiles/Tile.svelte
+++ b/src/lib/components/tiles/Tile.svelte
@@ -60,6 +60,7 @@ Metro-like tile. Must be in a group to display correctly.
     let {
         size,
         row,
+        icon,
         column,
         children,
     }: {
@@ -78,6 +79,11 @@ Metro-like tile. Must be in a group to display correctly.
          */
         column: number;
 
+        /**
+         * Icon. Must be a valid URL.
+         */
+        icon: string;
+
         /**
          * Pages.
          */
@@ -162,6 +168,7 @@ Metro-like tile. Must be in a group to display correctly.
 <div
     class={style({ size })}
     style="
+        --tile-icon: url('{icon}');
         --tile-icon-size: {iconSize}px;
         --tile-page-height: {pageHeight}px;
         --tile-name-display: {size !== 'small' ? 'inline' : 'none'};
diff --git a/src/lib/components/tiles/pages/TileIconPage.svelte b/src/lib/components/tiles/pages/TileIconPage.svelte
index 730d792..a488384 100644
--- a/src/lib/components/tiles/pages/TileIconPage.svelte
+++ b/src/lib/components/tiles/pages/TileIconPage.svelte
@@ -6,14 +6,8 @@ Icon page for a tile. Must be in a tile to display correctly.
 
 <script lang="ts">
     let {
-        icon,
         name,
     }: {
-        /**
-         * Icon. Must be a valid URL.
-         */
-        icon: string;
-
         /**
          * Name.
          */
@@ -25,7 +19,7 @@ Icon page for a tile. Must be in a tile to display correctly.
     class="flex flex-col justify-end bg-center bg-no-repeat"
     style="
         height: var(--tile-page-height);
-        background-image: url('{icon}');
+        background-image: var(--tile-icon);
         background-size: var(--tile-icon-size);
     "
 >
diff --git a/src/lib/components/tiles/pages/TileImagePage.svelte b/src/lib/components/tiles/pages/TileImagePage.svelte
index e416a2f..7704480 100644
--- a/src/lib/components/tiles/pages/TileImagePage.svelte
+++ b/src/lib/components/tiles/pages/TileImagePage.svelte
@@ -16,6 +16,11 @@ Image page for a tile. Must be in a tile to display correctly.
 </script>
 
 <div
-    class="w-full bg-cover bg-center bg-no-repeat"
+    class="flex flex-col justify-end bg-cover bg-center bg-no-repeat"
     style="height: var(--tile-page-height); background-image: url('{image}');"
-></div>
+>
+    <div
+        class="w-[20px] mt-auto aspect-square bg-contain bg-center bg-no-repeat self-end m-2"
+        style="background-image: var(--tile-icon);"
+    ></div>
+</div>
diff --git a/src/lib/components/tiles/pages/TileTextPage.svelte b/src/lib/components/tiles/pages/TileTextPage.svelte
new file mode 100644
index 0000000..af8ccf0
--- /dev/null
+++ b/src/lib/components/tiles/pages/TileTextPage.svelte
@@ -0,0 +1,37 @@
+<!--
+@component
+
+Text page for a tile. Must be in a tile to display correctly.
+-->
+
+<script lang="ts">
+    let {
+        title,
+        subtitle,
+        text,
+    }: {
+        title: string;
+        subtitle?: string;
+        text?: string;
+    } = $props();
+</script>
+
+<div
+    class="p-2 w-full flex flex-col gap-1 select-none text-white"
+    style="height: var(--tile-page-height);"
+>
+    <h1 class="font-bold text-md">{title}</h1>
+
+    {#if subtitle}
+        <h2 class="text-md">{subtitle}</h2>
+    {/if}
+
+    {#if text}
+        <p class="text-sm">{text}</p>
+    {/if}
+
+    <div
+        class="w-[20px] mt-auto aspect-square bg-contain bg-center bg-no-repeat self-end"
+        style="background-image: var(--tile-icon);"
+    ></div>
+</div>
diff --git a/src/routes/(tiles)/+page.svelte b/src/routes/(tiles)/+page.svelte
index 41a0576..d093d23 100644
--- a/src/routes/(tiles)/+page.svelte
+++ b/src/routes/(tiles)/+page.svelte
@@ -8,24 +8,25 @@
     import TileGroup from "$lib/components/tiles/TileGroup.svelte";
     import TileIconPage from "$lib/components/tiles/pages/TileIconPage.svelte";
     import TileImagePage from "$lib/components/tiles/pages/TileImagePage.svelte";
+    import TileTextPage from "$lib/components/tiles/pages/TileTextPage.svelte";
 </script>
 
 <TileGroup title="a lot of mikhails" rows={3} columns={3}>
-    <Tile size="small" row={5} column={2}>
-        <TileIconPage icon={iconSynzr} name="mikhail" />
+    <Tile size="small" row={5} column={2} icon={iconSynzr}>
+        <TileIconPage name="mikhail" />
     </Tile>
 
-    <Tile size="medium" row={3} column={5}>
-        <TileIconPage icon={iconSynzr} name="mikhail" />
+    <Tile size="medium" row={3} column={5} icon={iconSynzr}>
+        <TileIconPage name="mikhail" />
     </Tile>
 
-    <Tile size="wide" row={5} column={3}>
-        <TileIconPage icon={iconSynzr} name="mikhail" />
+    <Tile size="wide" row={5} column={3} icon={iconSynzr}>
         <TileImagePage image={imageTestRectangle} />
+        <TileTextPage title="Title" subtitle="Subtitle" text="Text" />
     </Tile>
 
-    <Tile size="large" row={1} column={1}>
-        <TileIconPage icon={iconSynzr} name="mikhail" />
+    <Tile size="large" row={1} column={1} icon={iconSynzr}>
+        <TileIconPage name="mikhail" />
         <TileImagePage image={imageTestSquare} />
     </Tile>
 </TileGroup>