1 files changed, 124 insertions, 0 deletions
diff --git a/docs/src/components/Examples/Thumbnail.astro b/docs/src/components/Examples/Thumbnail.astro
new file mode 100644
index 000000000..c4364396d
--- /dev/null
+++ b/docs/src/components/Examples/Thumbnail.astro
@@ -0,0 +1,124 @@
+---
+import {Markdown} from 'astro/components'
+import formatName from './function/format-name.js'
+const {data:{name,pkgJSON:{description}}} = Astro.props
+---
+   <!-- Example 1  -->
+<!-- <div class="thumbnail">
+        
+        <a href={`/example/${name}`}>
+            <h3>{formatName(name)}
+            </h3>
+            <img src="/default-og-image.png" alt="">
+        </a>
+
+        <pre data-lang='bash'>--template {name}</pre>
+</div> -->
+
+<!-- Example 2 -->
+<!-- <div class="thumbnail">
+        
+        <a href={`/example/${name}`}>
+            <img src="/default-og-image.png" alt="">
+            <h3>{formatName(name)}
+            </h3>
+        </a>
+        <pre data-lang='bash'>--template {name}</pre>
+</div> -->
+
+<!-- Example 3 -->
+<div class="wrapper">
+    <div class="thumbnail">
+            <div class="title">
+                <a href={`/example/${name}`}>
+                    <h3 >{formatName(name)}
+                    </h3>
+                </a>
+                <code class="code-inline">{name}</code>
+            </div>
+            <p class="description">{description}</p>
+            <pre data-lang='bash' class="code-block">--template {name}</pre>
+    </div>
+</div>
+
+<style lang="scss">
+    .wrapper{
+        box-sizing: border-box;
+        width: 45%;
+        display:flex;
+        flex-direction:column;
+
+        border-radius: 5rem;
+        box-shadow:  2px 2px 2px #cacaca;
+    }
+    .thumbnail{
+        flex-basis:1;
+        flex-grow: 1;
+        transition: all 0.25s ease-out ;
+        transform: perspective(1000rem); //hack but needed,
+        &:hover{
+            transform: scale(1.015);
+        }
+        > a h3{
+            margin:0.5rem;
+        }
+        > a img{
+            margin-top:0.5rem;
+            border-radius: 1rem;
+        }
+        > a{
+            color:var(--theme-accent)
+        }
+        >p{
+            word-break: keep-all;
+            white-space: wrap;
+            overflow: hidden;
+            text-overflow: ellipsis
+        }
+        > pre{
+            width:99%;
+            margin-top: 0.85rem;
+            margin-left:0;
+            overflow: auto;
+
+            &::-webkit-scrollbar{
+                height:10px;
+                background-color: #383740;
+                color:white;
+                
+            }
+            &::-webkit-scrollbar-track{
+                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);   
+            }
+            &::-webkit-scrollbar-thumb {
+                width: 25%;
+                background-color: darkgrey;
+                outline: 1px solid slategrey;
+                border-radius: 5rem;
+            }
+        }
+    
+        .title{
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: row;
+            align-items: baseline;
+            > * + * {
+                margin-inline-start: 0.5rem;
+            }
+
+        }
+    }
+    @media(max-width:603px){
+        .thumbnail{
+            width: 100%;
+            height: fit-content;
+            >pre{
+                border-radius:0.5rem;
+                overflow: auto;
+            }
+        }
+    }
+         
+
+</style>