oddsgate-ds 1.0.197 → 1.0.199

package/src/components/organisms/Glossary/Glossary.stories.tsx

@@ -0,0 +1,278 @@
+import React from 'react'
+import Glossary from './Glossary.component'
+
+export default {
+  title: 'Organisms/Glossary',
+  component: Glossary
+}
+
+export const Basic = () => (
+    <Glossary
+        title="Glossary"
+        subtitle="Explore commonly used terms in the gaming world."
+        categories={[
+            {
+                name: 'glossary-category',
+                items: [
+                    { slug: 'a', name: 'A' },
+                    { slug: 'm', name: 'M' },
+                    { slug: 'b', name: 'B' },
+                    { slug: 'c', name: 'C' },
+                    { slug: 'd', name: 'D' },
+                    { slug: 'e', name: 'E' },
+                    { slug: 'f', name: 'F' },
+                    { slug: 'g', name: 'G' },
+                    { slug: 'h', name: 'H' },
+                    { slug: 'i', name: 'I' },
+                    { slug: 'j', name: 'J' },
+                    { slug: 'k', name: 'K' },
+                    { slug: 'l', name: 'L' },
+                    { slug: 'n', name: 'N' },
+                    { slug: 'o', name: 'O' },
+                    { slug: 'q', name: 'Q' },
+                    { slug: 'r', name: 'R' },
+                    { slug: 't', name: 'T' },
+                    { slug: 'u', name: 'U' },
+                    { slug: 'v', name: 'V' },
+                    { slug: 'w', name: 'W' },
+                    { slug: 'x', name: 'X' },
+                    { slug: 'y', name: 'Y' },
+                    { slug: 'z', name: 'Z' }
+                ]
+            },
+            {
+                name: 'advanced-category',
+                items: [
+                    { slug: 'p', name: 'P' },
+                    { slug: 's', name: 'S' }
+                ]
+            }
+        ]}
+        items={[
+            {
+                title: 'Ace',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'a', name: 'A' }] }]
+            },
+            {
+                title: 'AFK',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'a', name: 'A' }] }]
+            },
+            {
+                title: 'Aggro',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'a', name: 'A' }] }]
+            },
+            {
+                title: 'Buff',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'b', name: 'B' }] }]
+            },
+            {
+                title: 'Bot',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'b', name: 'B' }] }]
+            },
+            {
+                title: 'Cooldown',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'c', name: 'C' }] }]
+            },
+            {
+                title: 'Carry',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'c', name: 'C' }] }]
+            },
+            {
+                title: 'Debuff',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'd', name: 'D' }] }]
+            },
+            {
+                title: 'DPS',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'd', name: 'D' }] }]
+            },
+            {
+                title: 'Experience',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'e', name: 'E' }] }]
+            },
+            {
+                title: 'Farm',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'f', name: 'F' }] }]
+            },
+            {
+                title: 'Gank',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'g', name: 'G' }] }]
+            },
+            {
+                title: 'Heal',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'h', name: 'H' }] }]
+            },
+            {
+                title: 'Jungle',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'j', name: 'J' }] }]
+            },
+            {
+                title: 'KDA',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'k', name: 'K' }] }]
+            },
+            {
+                title: 'Lane',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'l', name: 'L' }] }]
+            },
+            {
+                title: 'Multikill',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'm', name: 'M' }] }]
+            },
+            {
+                title: 'Nerf',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'n', name: 'N' }] }]
+            },
+            {
+                title: 'Objective',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'o', name: 'O' }] }]
+            },
+            {
+                title: 'Pentakill',
+                categories: [{ name: 'advanced-category', items: [{ slug: 'p', name: 'P' }] }]
+            },
+            {
+                title: 'Quest',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'q', name: 'Q' }] }]
+            },
+            {
+                title: 'Respawn',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'r', name: 'R' }] }]
+            },
+            {
+                title: 'Support',
+                categories: [{ name: 'advanced-category', items: [{ slug: 's', name: 'S' }] }]
+            },
+            {
+                title: 'Tank',
+                categories: [{ name: 'glossary-category', items: [{ slug: 't', name: 'T' }] }]
+            },
+            {
+                title: 'Ultimate',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'u', name: 'U' }] }]
+            },
+            {
+                title: 'Vision',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'v', name: 'V' }] }]
+            },
+            {
+                title: 'Wave',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'w', name: 'W' }] }]
+            },
+            {
+                title: 'XP',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'x', name: 'X' }] }]
+            },
+            {
+                title: 'Yolo',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'y', name: 'Y' }] }]
+            },
+            {
+                title: 'Zoning',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'z', name: 'Z' }] }]
+            },
+            // Additional terms
+            {
+                title: 'ADC',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'a', name: 'A' }] }]
+            },
+            {
+                title: 'AoE',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'a', name: 'A' }] }]
+            },
+            {
+                title: 'Backdoor',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'b', name: 'B' }] }]
+            },
+            {
+                title: 'CC',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'c', name: 'C' }] }]
+            },
+            {
+                title: 'Cheese',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'c', name: 'C' }] }]
+            },
+            {
+                title: 'Draft',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'd', name: 'D' }] }]
+            },
+            {
+                title: 'Engage',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'e', name: 'E' }] }]
+            },
+            {
+                title: 'Feed',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'f', name: 'F' }] }]
+            },
+            {
+                title: 'First Blood',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'f', name: 'F' }] }]
+            },
+            {
+                title: 'GG',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'g', name: 'G' }] }]
+            },
+            {
+                title: 'Harass',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'h', name: 'H' }] }]
+            },
+            {
+                title: 'Initiate',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'i', name: 'I' }] }]
+            },
+            {
+                title: 'Kiting',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'k', name: 'K' }] }]
+            },
+            {
+                title: 'Leash',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'l', name: 'L' }] }]
+            },
+            {
+                title: 'Meta',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'm', name: 'M' }] }]
+            },
+            {
+                title: 'Outplay',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'o', name: 'O' }] }]
+            },
+            {
+                title: 'Peel',
+                categories: [{ name: 'advanced-category', items: [{ slug: 'p', name: 'P' }] }]
+            },
+            {
+                title: 'Roam',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'r', name: 'R' }] }]
+            },
+            {
+                title: 'Snowball',
+                categories: [{ name: 'advanced-category', items: [{ slug: 's', name: 'S' }] }]
+            },
+            {
+                title: 'Split Push',
+                categories: [{ name: 'advanced-category', items: [{ slug: 's', name: 'S' }] }]
+            },
+            {
+                title: 'Tilt',
+                categories: [{ name: 'glossary-category', items: [{ slug: 't', name: 'T' }] }]
+            },
+            {
+                title: 'Trade',
+                categories: [{ name: 'glossary-category', items: [{ slug: 't', name: 'T' }] }]
+            },
+            {
+                title: 'Wombo Combo',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'w', name: 'W' }] }]
+            },
+            {
+                title: 'Zone',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'z', name: 'Z' }] }]
+            }
+        ]}
+        placeholder="What are you looking for?"
+    />
+)
+Basic.parameters = {
+  backgrounds: {
+    default: 'glossary-bg',
+    values: [{ name: 'glossary-bg', value: '#33052F' }]
+  }
+}

package/src/components/organisms/Glossary/Glossary.themes.ts

@@ -0,0 +1,27 @@
+import { colors } from '@/styles/variables'
+import styled from 'styled-components'
+
+export const StyledGlossary = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`
+
+export const StyledGlossaryHeader = styled.div``
+
+export const StyledGlossaryTitle = styled.h1`
+    color: ${colors.primary50};
+`
+
+export const StyledGlossarySubtitle = styled.h4``
+
+export const StyledGlossaryIndex = styled.div``
+
+export const StyledGlossaryCategories = styled.div`
+width: 100%;
+`
+
+export const StyledGlossarySeparator = styled.div``
+
+export const StyledGlossaryCategoryItems = styled.li``