import React from 'react' ; import DesignResources from "./DesignResources" ; const mockData = [ { "node" : { "resources" : { "design" : [ { "category" : "Design System" , "link" : "https://github.com/stoneddesigner/semantic-ui-sketch" , "name" : "Pure Styled Components" , "image" : "sketch-semantic-ui.png" , "description" : "Sketch Prototyping Kit and Style Guide Generator for Semantic UI" } , { "category" : "UI Kit" , "link" : "https://www.uplabs.com/posts/sketch-data-table-components" , "name" : "Sketch Data Table Components" , "image" : "sketch-data-table-components.jpg" , "description" : "I had to design a table for a client in Sketch, so I did a quick search for dynamic Sketch table symbols/components, and I couldn't track anything down that was actually dynamic. Most tables were 'hard coded' in a sense, with their columns and rows defined by line shapes, instead of individual cells, making it impossible to change the table format beyond the template. So I set off and created my own dynamic Sketch table and decided to share it with everyone(because tables are hard enough right? 😅😵)" } , { "category" : "UI Kit" , "link" : "https://github.com/whoisryosuke/ooto-dashboard-design" , "name" : "OOTO Dashboard" , "image" : "ui-ooto-dashboard.png" , "description" : "Sprint to recreate Sketch design to React UI components. Based on https://www.uplabs.com/posts/ooto-productivity-dashboards" } , { "category" : "UI Kit" , "link" : "https://www.uplabs.com/posts/daily-ui-settings-icons" , "name" : "Settings Page" , "image" : "daily-ui-settings-icons.png" , "description" : "Settings page for a user (like YouTube)" } , { "category" : "UI Kit" , "link" : "https://www.uplabs.com/posts/daily-ui-3-landing-page" , "name" : "toro Landing Page" , "image" : "daily-ui-3-landing-page.png" , "description" : "Using the Daily UI challenge as an opportunity to play and sketch with new colors and combinations." } , { "category" : "Icon" , "link" : "https://www.uplabs.com/posts/daily-ui-5-app-icon-icons" , "name" : "Lab Testing Icon" , "image" : "daily-ui-5-app-icon-icons.png" , "description" : "An app icon for a lab testing company." } , { "category" : "UI Kit" , "link" : "https://www.uplabs.com/posts/daily-ui-6-user-profile-with-seshsource" , "name" : "User Profile (Dark Mode)" , "image" : "daily-ui-6-user-profile-with-seshsource.png" , "description" : "Another exercise using the Daily UI prompts. This time I used SeshSource.com, a ticketing platform for cannabis events, and it's branding as the basis." } ] } } } , { "node" : { "resources" : { "design" : null } } } ] ; export default { title : 'Design Resources' } ; export const withMockData = ( ) => < DesignResources resources = { mockData } />;