fix(story): add header design

[eunjae-lee]

What?

This PR adds header design.

Screenshot.2023-12-08.at.11.05.17.mp4

I added a functionality to attach right action buttons, which is hidden at the moment.

[eunjae-lee]

Lucide is an icon library: https://lucide.dev/ (supports many frameworks)

[BibiSebi]

At some point, we will need to use the icons from blok.ink (maybe just exported as svg). Does it make sense the use lucid icons?

[eunjae-lee]

@BibiSebi hmm I didn't think of the aspect. Could you give me an example on what kind of blok.ink icons we need to use?

[eunjae-lee]

In fact, I didn't even know there are icon sets within blok.ink 🤯

https://blok.ink/?path=/docs/basic-sbicon--documentation#storyblok-icons

still not sure what to do about it, though 🤔

[BibiSebi]

Here I just highlighted some icons we will need.
We could extract those as SVG and use them directly inside our code? that is an option and then might not need nuxt-lucid-icons. We might even want to have a small internal package with all these icons as svg so that we can reuse them. WDYT?

[eunjae-lee]

Ah okay. If it's okay to use slightly different looking icons, I'd prefer to use an icon library instead of keeping the icons directly within the repo, especially when dealing with both Vue and React. It's because it's a bit of pain to deal with svgs in general. For example, in vue, you'd want to have an icon file like:

// IconMagnifier.vue

<template>
  <svg ....>...</svg>
</template>

If you want to apply a color or size to the svg, then you need to receive props like:

// IconMagnifier.vue

<script setup>
defineProps(['color', 'size'])
</script>

<template>
  <svg style={{ color, fontSize: size }} ....>...</svg>
</template>

(I mean something better than that)

and we need to recreate the same thing for React component because of the different syntax.

On the other hand, icon libraries like lucide provide components for different frameworks including the basic props like above. And you get to import the only icons you're using, not the whole set.

[BibiSebi]

Ok we can go with the icons library :). I thought maybe daisy UI cold help us with the coloring and size without the need to pass props necessarily

[eunjae-lee]

Current dependencies on/for this PR:

• main
  • PR fix(story): add header design #15 👈
    • PR fix(story): add loader #16
      • PR fix(story): add table design #17

This stack of pull requests is managed by Graphite.

[eunjae-lee]

Merge activity

• Dec 12, 8:30 AM: @@eunjae-lee started a stack merge that includes this pull request via Graphite.
• Dec 12, 8:31 AM: @@eunjae-lee merged this pull request with Graphite.