feat: cards

packages/website/src/components/Embeds/PreviewWrapper/index.css.ts

@@ -9,14 +9,6 @@ const fadeOutBorder = keyframes({
   },
 });
 
-export const wrapper = style({
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  overflow: 'hidden',
-});
-
 export const animated = style({
   animation: `${fadeOutBorder} 0.5s linear`,
 

packages/website/src/components/Embeds/PreviewWrapper/index.tsx

@@ -6,9 +6,10 @@ import * as styles from './index.css';
 
 interface PreviewWrapperProps {
   name: keyof typeof embedPreviews;
+  naked?: boolean;
 }
 
-export function PreviewWrapper({ name }: PreviewWrapperProps) {
+export function PreviewWrapper({ name, naked }: PreviewWrapperProps) {
   const { useEmbedState } = useEmbedStateCurry();
   const width = useEmbedState('width');
   const height = useEmbedState('height');
@@ -23,10 +24,29 @@ export function PreviewWrapper({ name }: PreviewWrapperProps) {
     wrapper.current.classList.add(styles.animated);
   }, [width, height]);
 
+  if (naked) {
+    return (
+      <Box
+        position="absolute"
+        top="0"
+        left="50%"
+        style={{ transform: 'translate(-50%, 0) scale(0.75)' }}
+        width={`${width}px`}
+        height={`${height}px`}
+      >
+        <Preview />
+      </Box>
+    );
+  }
+
   return (
     <Box
+      position="absolute"
+      top="50%"
+      left="50%"
+      overflow="hidden"
+      style={{ transform: naked ? 'scale(0.25)' : 'translate(-50%, -50%)' }}
       ref={wrapper}
-      className={styles.wrapper}
       width={`${width}px`}
       height={`${height}px`}
     >

packages/website/src/core/radix/var.ts

@@ -8,6 +8,7 @@ type Name =
   | `color-${'background' | `panel-${'solid' | 'translucent'}` | 'surface' | 'overlay'}`
   | `radius-${1 | 2 | 3 | 4 | 5 | 6 | 'full'}`
   | `space-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
+  | `shadow-${1 | 2 | 3 | 4 | 5 | 6}`
   | `${RadixColor | 'accent' | 'gray'}-${
       | 1
       | 2

packages/website/src/pages/tools/embed/[embed]/_index.tsx

@@ -55,7 +55,6 @@ export function Page({ embed }: PageProps) {
 
 function Content({ embed }: PageProps) {
   const embedStateStore = EmbedState.useStore();
-  const appStore = App.useStore();
   const config = embedConfigurations[embed] as EmbedConfig;
   const [backgroundImage, setBackgroundImage] = useState(
     imgur('SO13zur', { format: 'jpeg' }),

packages/website/src/pages/tools/embed/_index.tsx

@@ -0,0 +1,63 @@
+import { imgur, ImgurSize } from '@blitzkit/core';
+import { Box, Flex, Link, Text } from '@radix-ui/themes';
+import { capitalize } from 'lodash-es';
+import { PreviewWrapper } from '../../../components/Embeds/PreviewWrapper';
+import { PageWrapper } from '../../../components/PageWrapper';
+import {
+  embedConfigurations,
+  extractEmbedConfigDefaults,
+} from '../../../constants/embeds';
+import { Var } from '../../../core/radix/var';
+import { EmbedState } from '../../../stores/embedState';
+
+export function Page() {
+  return (
+    <PageWrapper color="red">
+      {Object.entries(embedConfigurations).map(([embed, config]) => (
+        <EmbedState.Provider data={extractEmbedConfigDefaults(config)}>
+          <Link
+            href={`/tools/embed/${embed}`}
+            color="gray"
+            highContrast
+            style={{
+              width: 'fit-content',
+              height: 'fit-content',
+            }}
+            underline="hover"
+          >
+            <Flex
+              direction="column"
+              overflow="hidden"
+              style={{
+                borderRadius: Var('radius-4'),
+                backgroundColor: Var('color-panel-solid'),
+                boxShadow: Var('shadow-3'),
+              }}
+            >
+              <Flex justify="center" p="2">
+                <Text>{capitalize(embed)}</Text>
+              </Flex>
+
+              <Box
+                width="20rem"
+                height="20rem"
+                overflow="hidden"
+                position="relative"
+                style={{
+                  backgroundImage: `url(${imgur('SO13zur', { format: 'jpeg', size: ImgurSize.SmallThumbnail })})`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                }}
+              >
+                <PreviewWrapper
+                  naked
+                  name={embed as keyof typeof embedConfigurations}
+                />
+              </Box>
+            </Flex>
+          </Link>
+        </EmbedState.Provider>
+      ))}
+    </PageWrapper>
+  );
+}

packages/website/src/pages/tools/embed/index.astro

@@ -1,17 +1,9 @@
 ---
-import { Link } from '@radix-ui/themes';
-import { PageWrapper } from '../../../components/PageWrapper';
-import { embedConfigurations } from '../../../constants/embeds';
 import { embedTool } from '../../../constants/tools';
 import ToolLayout from '../../../layouts/ToolLayout.astro';
+import { Page } from './_index';
 ---
 
 <ToolLayout tool={embedTool}>
-  <PageWrapper color="red">
+  <Page />
-    {
-      Object.entries(embedConfigurations).map(([embed, config]) => (
-        <Link href={`/tools/embed/${embed}`}>{embed}</Link>
-      ))
-    }
-  </PageWrapper>
 </ToolLayout>