chore: long to tall badge

src/components/RoadCard/RoadCardPage.tsx

@@ -2,14 +2,14 @@ import { useState } from 'preact/hooks';
 
 import { useCopyText } from '../../hooks/use-copy-text';
 import { useAuth } from '../../hooks/use-auth';
-import { LongBadgeTab } from './LongBadgeTab';
+import { TallBadgeTab } from './TallBadgeTab';
 import WideBadgeTab from './WideBadgeTab';
 import CopyIcon from '../../icons/copy.svg';
 
 export type GetBadgeLinkProps = {
   user: ReturnType<typeof useAuth>;
   variant: 'dark' | 'light';
-  badge: 'long' | 'wide';
+  badge: 'tall' | 'wide';
 };
 
 export function getBadgeLink({ user, variant, badge }: GetBadgeLinkProps) {
@@ -45,7 +45,7 @@ export function Editor(props: EditorProps) {
   const { isCopied, copyText } = useCopyText();
 
   return (
-    <div className="flex flex-grow flex-col overflow-hidden rounded border border-gray-300 bg-gray-50">
+    <div className="flex flex-grow flex-col overflow-hidden rounded border border-gray-300 bg-gray-50 w-full">
       <div className="flex items-center justify-between gap-2 border-b border-gray-300 px-3 py-2">
         <span className="text-xs uppercase leading-none text-gray-400">
           {title}
@@ -75,7 +75,7 @@ export type BadgeProps = {
 };
 
 export function RoadCardPage() {
-  const [selectedBadge, setSelectedBadge] = useState<'long' | 'wide'>('long');
+  const [selectedBadge, setSelectedBadge] = useState<'tall' | 'wide'>('tall');
 
   const user = useAuth();
   if (!user) {
@@ -96,15 +96,15 @@ export function RoadCardPage() {
           <div className="flex items-center">
             <button
               className={`relative top-px flex items-center justify-center px-3 pb-3 leading-none shadow-gray-600 ${
-                selectedBadge === 'long'
+                selectedBadge === 'tall'
                   ? 'shadow-[inset_0_-1px_0_var(--tw-shadow-color)]'
                   : 'text-gray-600'
               }`}
               onClick={() => {
-                setSelectedBadge('long');
+                setSelectedBadge('tall');
               }}
             >
-              Long
+              Tall
             </button>
 
             <button
@@ -123,7 +123,7 @@ export function RoadCardPage() {
         </div>
       </div>
 
-      {selectedBadge === 'long' && <LongBadgeTab />}
+      {selectedBadge === 'tall' && <TallBadgeTab />}
       {selectedBadge === 'wide' && <WideBadgeTab />}
     </>
   );

src/components/RoadCard/TallBadgeTab.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'preact/hooks';
-import { LongBadge } from './LongBadge';
+import { LongBadge } from './TallBadge';
 import { Editor, getBadgeLink } from './RoadCardPage';
 import { GithubReadmeBanner } from './GithubReadmeBanner';
 import { useAuth } from '../../hooks/use-auth';
 
-export function LongBadgeTab() {
+export function TallBadgeTab() {
   const [selectedVariant, setSelectedVariant] = useState<'dark' | 'light'>(
     'dark'
   );
@@ -16,14 +16,14 @@ export function LongBadgeTab() {
   const { badgeUrl, textareaContent, markdownSnippet } = getBadgeLink({
     user,
     variant: selectedVariant,
-    badge: 'long',
+    badge: 'tall',
   });
 
   return (
-    <div className="grid gap-6 sm:grid-cols-5">
+    <div className="sm:grid sm:grid-cols-5 sm:gap-6">
       <LongBadge badgeUrl={badgeUrl} />
 
-      <div className="sm:col-span-3">
+      <div className="sm:col-span-3 mt-6 sm:mt-0">
         <div>
           <span className="text-xs uppercase leading-none text-gray-400">
             Variation
@@ -50,7 +50,7 @@ export function LongBadgeTab() {
           </div>
         </div>
 
-        <div className="mt-4 flex flex-col gap-2">
+        <div className="mt-4 flex flex-col gap-3">
           <Editor title={'HTML'} text={textareaContent} />
           <Editor title={'Markdown'} text={markdownSnippet} />
         </div>

src/components/RoadCard/WideBadgeTab.tsx

@@ -50,7 +50,7 @@ export default function WideBadgeTab() {
           </div>
         </div>
 
-        <div className={`mt-4 flex gap-2`}>
+        <div className={`mt-4 flex flex-col gap-3 sm:flex-row`}>
           <Editor title={'HTML'} text={textareaContent} />
           <Editor title={'Markdown'} text={markdownSnippet} />
         </div>