From ddfc877328b95063f2b8e16fa380e27917776a3f Mon Sep 17 00:00:00 2001 From: Siddhartha Gudipati Date: Fri, 20 Dec 2024 07:43:23 -0800 Subject: [PATCH] refactor: update imports and wrap text elements in Typography component --- lib/Article/Article.tsx | 2 +- src/pages/AccordionSamples.tsx | 26 ++++++++++++++-------- src/pages/StepSamples.tsx | 38 ++++++++++++++++++++------------- src/pages/TabSamples.tsx | 21 ++++++++++++------ src/pages/TypographySamples.tsx | 1 + 5 files changed, 56 insertions(+), 32 deletions(-) diff --git a/lib/Article/Article.tsx b/lib/Article/Article.tsx index fe28578..af55a5a 100644 --- a/lib/Article/Article.tsx +++ b/lib/Article/Article.tsx @@ -1,5 +1,5 @@ import { createElement, useEffect, useState } from 'react'; -import { Note, Tip, Steps, Step } from '@stubbycms/ui'; +import { Note, Tip, Steps, Step } from '../'; import { highlight } from 'sugar-high'; import { removeFrontMatter, slugify } from '../utils'; import remarkGfm from 'remark-gfm'; diff --git a/src/pages/AccordionSamples.tsx b/src/pages/AccordionSamples.tsx index 1cf76f3..592131e 100644 --- a/src/pages/AccordionSamples.tsx +++ b/src/pages/AccordionSamples.tsx @@ -1,27 +1,35 @@ -import { Accordion, AccordionGroup } from '../../lib'; +import { Accordion, AccordionGroup, Typography } from '../../lib'; export const AccordionSamples = () => { return ( <> - They turn it off and on again, just like they do with routers, modems, and any other - device. If that fails, they google 'why won't my lightbulb work? + + They turn it off and on again, just like they do with routers, modems, and any other + device. If that fails, they google 'why won't my lightbulb work? + - Because bugs love to party when you're done! It's like they know when you've declared - 'code complete' and show up uninvited. + + Because bugs love to party when you're done! It's like they know when you've declared + 'code complete' and show up uninvited. + - You either break five other things or question if you're even awake. The real mystery: Why - are you working at 2 a.m.? + + You either break five other things or question if you're even awake. The real mystery: + Why are you working at 2 a.m.? + - Because code is like a toddler — it behaves until everyone's watching. Then it throws a - tantrum right when it matters most! + + Because code is like a toddler — it behaves until everyone's watching. Then it throws a + tantrum right when it matters most! + diff --git a/src/pages/StepSamples.tsx b/src/pages/StepSamples.tsx index be4e198..3926260 100644 --- a/src/pages/StepSamples.tsx +++ b/src/pages/StepSamples.tsx @@ -1,4 +1,4 @@ -import { Step, Steps } from '../../lib'; +import { Step, Steps, Typography } from '../../lib'; export const StepSamples = () => { return ( @@ -8,35 +8,43 @@ export const StepSamples = () => { title="Choose your coffee beans" number="1" > - Pick the beans that suit your taste. Whether you like a strong dark roast or a light - fruity blend, this is where the magic begins. + + Pick the beans that suit your taste. Whether you like a strong dark roast or a light + fruity blend, this is where the magic begins. + - Use a tablespoon to measure out the right amount of coffee. Here's a quick guide: -
- + + Use a tablespoon to measure out the right amount of coffee. Here's a quick guide: +
+
    +
  • 1 tablespoon for a single cup
    • +
  • 2 tablespoons if you need that extra kick
    • +
  • A little more if it's going to be one of those days
    • +
+ - Heat water to just before boiling. If you're using a kettle, this is the perfect time to - zone out and daydream about your coffee. + + Heat water to just before boiling. If you're using a kettle, this is the perfect time to + zone out and daydream about your coffee. + - Now, pour the hot water over the coffee grounds and let it brew. Take in the aroma as it - fills the room. Wait a few minutes, pour yourself a cup, and enjoy that first sip like - it's the best moment of the day—because it is! + + Now, pour the hot water over the coffee grounds and let it brew. Take in the aroma as it + fills the room. Wait a few minutes, pour yourself a cup, and enjoy that first sip like + it's the best moment of the day—because it is! + diff --git a/src/pages/TabSamples.tsx b/src/pages/TabSamples.tsx index a637382..c4b7f82 100644 --- a/src/pages/TabSamples.tsx +++ b/src/pages/TabSamples.tsx @@ -1,20 +1,27 @@ -import { Tab, Tabs } from '../../lib'; +import { Tab, Tabs, Typography } from '../../lib'; export function TabSamples() { return ( <> - Welcome aboard! This first tab is your launchpad for everything ahead. Buckle up, get - comfortable, and prepare for a smooth ride through the rest of the content! + + Welcome aboard! This first tab is your launchpad for everything ahead. Buckle up, get + comfortable, and prepare for a smooth ride through the rest of the content! + - Now that you've taken off, let's explore! In this tab, you'll discover the core details of - your journey. Whether it's facts, steps, or insights—here's where you dig deeper. + + Now that you've taken off, let's explore! In this tab, you'll discover the core details + of your journey. Whether it's facts, steps, or insights—here's where you dig deeper. + - You've reached your destination! In this final tab, it's time to wrap up, reflect on what - you've learned, and take away the key points from your adventure. Well done, explorer! + + You've reached your destination! In this final tab, it's time to wrap up, reflect on + what you've learned, and take away the key points from your adventure. Well done, + explorer! + diff --git a/src/pages/TypographySamples.tsx b/src/pages/TypographySamples.tsx index a08bd36..a219a1e 100644 --- a/src/pages/TypographySamples.tsx +++ b/src/pages/TypographySamples.tsx @@ -9,6 +9,7 @@ export const TypographySamples = () => {
+
); };